Auto-Extracted Component Library

Complete collection of 843 components from 27 HTML files

Headers - Services Header

HEADERS html> comp-1

A headers component. Contains 2 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations, we're here for all of life's milestones

...
HTML
<div class="services-header">
 <h2>
  Celebrate Every Moment
 </h2>
 <p class="subtitle">
  From intimate gatherings to grand celebrations, we're here for all of life's milestones
 </p>
</div>
CSS
.services-header .subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.services-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.services-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 1;
        }

Headers - Venue Header

HEADERS html> comp-2

A headers component. Contains 2 child elements.

Explore Our Spaces

Every corner tells a story, every space creates memories

...
HTML
<div class="venue-header">
 <h2>
  Explore Our Spaces
 </h2>
 <p>
  Every corner tells a story, every space creates memories
 </p>
</div>
CSS
.venue-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.venue-header {
            text-align: center;
            margin-bottom: 80px;
        }
.venue-header p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
        }

Headers - Packages Header

HEADERS html> comp-3

A headers component. Contains 2 child elements.

Investment in Memories

Wedding Packages

...
HTML
<div class="packages-header">
 <p class="script-font">
  Investment in Memories
 </p>
 <h2>
  Wedding Packages
 </h2>
</div>
CSS
.packages-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.packages-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.packages-header {
            text-align: center;
            margin-bottom: 80px;
        }
.script-font {
            color: var(--accent-gold);
        }

Headers - Package Header

HEADERS html> comp-4

A headers component. Contains 3 child elements.

Intimate

$3,500 / up to 75 guests
...
HTML
<div class="package-header">
 <h3 class="package-name">
  Intimate
 </h3>
 <div class="package-price">
  $3,500
  <span>
   / up to 75 guests
  </span>
 </div>
</div>
CSS
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Headers - Package Header

HEADERS html> comp-5

A headers component. Contains 3 child elements.

Classic

$5,500 / up to 150 guests
...
HTML
<div class="package-header">
 <h3 class="package-name">
  Classic
 </h3>
 <div class="package-price">
  $5,500
  <span>
   / up to 150 guests
  </span>
 </div>
</div>
CSS
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Headers - Package Header

HEADERS html> comp-6

A headers component. Contains 3 child elements.

Grand

$8,500 / up to 300 guests
...
HTML
<div class="package-header">
 <h3 class="package-name">
  Grand
 </h3>
 <div class="package-price">
  $8,500
  <span>
   / up to 300 guests
  </span>
 </div>
</div>
CSS
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Headers - Team Header

HEADERS html> comp-7

A headers component. Contains 2 child elements.

Meet Your Hosts

The Family Behind the Farm

...
HTML
<div class="team-header">
 <p class="script-font">
  Meet Your Hosts
 </p>
 <h2>
  The Family Behind the Farm
 </h2>
</div>
CSS
.team-header h2,
        .team-section .member-name {
            color: white;
        }
.team-header .script-font {
            color: var(--accent-gold);
        }
.team-header h2 {
            font-size: 48px;
            margin-bottom: 20px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.team-header .script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            color: var(--accent-gold);
        }
.team-header {
            text-align: center;
            margin-bottom: 80px;
        }

Headers - Blog Header

HEADERS html> comp-8

A headers component containing buttons, links. Contains 4 child elements.

Stories from the Barn

Wedding inspiration, planning tips, and real celebrations

View All Posts
...
HTML
<div class="blog-header">
 <div class="blog-header-text">
  <h2>
   Stories from the Barn
  </h2>
  <p>
   Wedding inspiration, planning tips, and real celebrations
  </p>
 </div>
 <a class="btn-outline" href="#">
  View All Posts
 </a>
</div>
CSS
.blog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            flex-wrap: wrap;
            gap: 30px;
        }
.blog-header-text h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 10px;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.blog-header-text p {
            color: var(--text-light);
            font-size: 18px;
        }
.blog-header {
                flex-direction: column;
                align-items: flex-start;
            }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Headers - Blog Header Text

HEADERS html> comp-9

A headers component. Contains 2 child elements.

Stories from the Barn

Wedding inspiration, planning tips, and real celebrations

...
HTML
<div class="blog-header-text">
 <h2>
  Stories from the Barn
 </h2>
 <p>
  Wedding inspiration, planning tips, and real celebrations
 </p>
</div>
CSS
.blog-header-text h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 10px;
        }
.blog-header-text p {
            color: var(--text-light);
            font-size: 18px;
        }

Headers - Instagram Header

HEADERS html> comp-10

A headers component containing links. Contains 2 child elements.

Follow Our Journey

@rumriverbarn
...
HTML
<div class="instagram-header">
 <h2>
  Follow Our Journey
 </h2>
 <a class="instagram-handle" href="#">
  @rumriverbarn
 </a>
</div>
CSS
.instagram-handle {
            color: var(--accent-gold);
            font-size: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
.instagram-handle:hover {
            color: var(--primary-brown);
        }
.instagram-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.instagram-header {
            text-align: center;
            margin-bottom: 60px;
        }

Heroes - Offset Hero

HEROES html> comp-11

A heroes component containing images, buttons, links. Contains 17 child elements.

Minnesota's Premier Venue

Where Rustic Charm Meets Modern Elegance

Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.

HTML
<section class="offset-hero">
 <div class="container">
  <div class="offset-hero-content">
   <div class="offset-text">
    <span class="badge">
     Minnesota's Premier Venue
    </span>
    <h2>
     Where Rustic Charm Meets Modern Elegance
    </h2>
    <p>
     Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.
    </p>
    <div class="btn-group">
     <a class="btn-outline" href="#">
      View Gallery
     </a>
     <a class="btn-outline" href="#">
      Check Availability
     </a>
    </div>
   </div>
   <div class="offset-images">
    <div class="offset-main-img">
     <img alt="Wedding ceremony" src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800"/>
    </div>
    <div class="offset-accent-img">
     <img alt="Wedding details" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
    </div>
    <div class="floating-card">
     <h4>
      2025 Dates
     </h4>
     <p>
      Limited availability for peak season
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Subtle Wave Divider Bottom -->
</section>
CSS
.offset-main-img {
            position: absolute;
            top: 0;
            right: 0;
            width: 85%;
            height: 85%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.15);
        }
.offset-hero {
            padding: 120px 0 140px;
            background: linear-gradient(135deg, var(--soft-white) 0%, var(--warm-cream) 100%);
            position: relative;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.offset-hero-content,
            .block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.offset-accent-img {
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 45%;
            height: 45%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border: 8px solid var(--soft-white);
        }
.offset-text p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 40px;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.offset-hero-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px;
            align-items: center;
            position: relative;
        }
.offset-accent-img {
                display: none;
            }
.offset-accent-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.btn-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
.offset-main-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.offset-images {
                height: 400px;
                margin-top: 40px;
            }
.offset-text {
            z-index: 2;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.floating-card {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            max-width: 200px;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.floating-card h4 {
            color: var(--deep-brown);
            font-size: 20px;
            margin-bottom: 8px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.offset-text .badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.floating-card p {
            color: var(--text-light);
            font-size: 14px;
        }
.offset-images {
            position: relative;
            height: 600px;
        }
.offset-text h2 {
            font-size: 54px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }

Heroes - Offset Hero Content

HEROES html> comp-12

A heroes component containing images, buttons, links. Contains 15 child elements.

Minnesota's Premier Venue

Where Rustic Charm Meets Modern Elegance

Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.

View Gallery
HTML
<div class="offset-hero-content">
 <div class="offset-text">
  <span class="badge">
   Minnesota's Premier Venue
  </span>
  <h2>
   Where Rustic Charm Meets Modern Elegance
  </h2>
  <p>
   Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.
  </p>
  <div class="btn-group">
   <a class="btn-outline" href="#">
    View Gallery
   </a>
   <a class="btn-outline" href="#">
    Check Availability
   </a>
  </div>
 </div>
 <div class="offset-images">
  <div class="offset-main-img">
   <img alt="Wedding ceremony" src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800"/>
  </div>
  <div class="offset-accent-img">
   <img alt="Wedding details" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
  </div>
  <div class="floating-card">
   <h4>
    2025 Dates
   </h4>
   <p>
    Limited availability for peak season
   </p>
  </div>
 </div>
</div>
CSS
.offset-main-img {
            position: absolute;
            top: 0;
            right: 0;
            width: 85%;
            height: 85%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.15);
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.offset-hero-content,
            .block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.offset-accent-img {
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 45%;
            height: 45%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border: 8px solid var(--soft-white);
        }
.offset-text p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 40px;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.offset-hero-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px;
            align-items: center;
            position: relative;
        }
.offset-accent-img {
                display: none;
            }
.offset-accent-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.btn-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
.offset-main-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.offset-images {
                height: 400px;
                margin-top: 40px;
            }
.offset-text {
            z-index: 2;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.floating-card {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            max-width: 200px;
        }
.floating-card h4 {
            color: var(--deep-brown);
            font-size: 20px;
            margin-bottom: 8px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.offset-text .badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.floating-card p {
            color: var(--text-light);
            font-size: 14px;
        }
.offset-images {
            position: relative;
            height: 600px;
        }
.offset-text h2 {
            font-size: 54px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }

Heroes - Venue Showcase Section Shape Top Shape So

HEROES html> comp-13

A heroes component containing images, buttons. Contains 28 child elements.

Explore Our Spaces

Every corner tells a story, every space creates memories

<section class="venue-showcase section-shape-top shape--soft-curve">
 <div class="container venue-content">
  <div class="venue-header">
   <h2>
    Explore Our Spaces
   </h2>
   <p>
    Every corner tells a story, every space creates memories
   </p>
  </div>
  <div class="venue-tabs">
   <button class="venue-tab active">
    The Barn
   </button>
   <button class="venue-tab">
    Bridal Suite
   </button>
   <button class="venue-tab">
    Groom's Quarters
   </button>
   <button class="venue-tab">
    Garden Pavilion
   </button>
  </div>
  <div class="venue-display">
   <div class="venue-main-image">
    <img alt="Barn interior" src="https://images.unsplash.com/photo-1564069114553-7215e1ff1890?w=800"/>
   </div>
   <div class="venue-details">
    <h3>
     The Historic Barn
    </h3>
    <p>
     Our crown jewel, this beautifully restored barn features soaring ceilings, original timber beams, and modern amenities seamlessly integrated into its historic charm.
    </p>
    <div class="venue-features">
     <div class="venue-feature">
      <h5>
       Capacity
      </h5>
      <p>
       Up to 300 guests
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Features
      </h5>
      <p>
       Built-in bar & dance floor
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Lighting
      </h5>
      <p>
       Edison bulbs & chandeliers
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Climate
      </h5>
      <p>
       Heated & air conditioned
      </p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <!-- Split Divider Bottom -->
</section>
CSS
.venue-tabs {
                flex-direction: column;
                align-items: center;
            }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.venue-tab {
            padding: 15px 35px;
            background: transparent;
            border: 2px solid var(--accent-gold);
            color: var(--accent-gold);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.venue-display {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 60px;
            align-items: center;
        }
.venue-showcase.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.venue-header {
            text-align: center;
            margin-bottom: 80px;
        }
.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.container {
                padding: 0 20px;
            }
.venue-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.venue-tab.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.venue-main-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.shape--soft-curve { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,60 Q600,0 1200,60 L1200,120 L0,120 Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.venue-content {
            position: relative;
            z-index: 1;
        }
.section-shape-top { 
            position: relative; 
        }
.venue-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.venue-header p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
        }
.venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.venue-details p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
        }
.venue-details {
            color: white;
        }
.venue-showcase {
            padding: 120px 0;
            overflow: visible;
            background-image: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(212, 165, 116, 0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>'), linear-gradient(135deg, var(--deep-brown) 0%, var(--dark-bg) 100%);
            background-repeat: repeat, no-repeat;
            background-size: 60px 60px, 100% 100%;
            background-position: top left, center;
            position: relative;
            overflow: hidden;
        }
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }
.venue-main-image {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.3);
        }
.venue-details h3 {
            font-size: 36px;
            margin-bottom: 25px;
            color: var(--accent-gold);
        }

Galleries - Packages Grid

GALLERIES html> comp-14

A galleries component containing buttons. Contains 41 child elements.

Intimate

$3,500 / up to 75 guests
  • 6-hour venue rental
  • Ceremony & reception spaces
  • Tables, chairs & linens
  • Bridal suite access
    HTML
    <div class="packages-grid">
     <div class="package-card">
      <div class="package-header">
       <h3 class="package-name">
        Intimate
       </h3>
       <div class="package-price">
        $3,500
        <span>
         / up to 75 guests
        </span>
       </div>
      </div>
      <div class="package-body">
       <ul class="package-features">
        <li>
         6-hour venue rental
        </li>
        <li>
         Ceremony & reception spaces
        </li>
        <li>
         Tables, chairs & linens
        </li>
        <li>
         Bridal suite access
        </li>
        <li>
         Setup & breakdown assistance
        </li>
       </ul>
       <button class="package-btn">
        Learn More
       </button>
      </div>
     </div>
     <div class="package-card featured">
      <div class="package-header">
       <h3 class="package-name">
        Classic
       </h3>
       <div class="package-price">
        $5,500
        <span>
         / up to 150 guests
        </span>
       </div>
      </div>
      <div class="package-body">
       <ul class="package-features">
        <li>
         10-hour venue rental
        </li>
        <li>
         Full property access
        </li>
        <li>
         Premium décor package
        </li>
        <li>
         Both suites included
        </li>
        <li>
         Day-before setup time
        </li>
        <li>
         Complimentary rehearsal
        </li>
       </ul>
       <button class="package-btn">
        Most Popular Choice
       </button>
      </div>
     </div>
     <div class="package-card">
      <div class="package-header">
       <h3 class="package-name">
        Grand
       </h3>
       <div class="package-price">
        $8,500
        <span>
         / up to 300 guests
        </span>
       </div>
      </div>
      <div class="package-body">
       <ul class="package-features">
        <li>
         Full weekend rental
        </li>
        <li>
         All venue spaces included
        </li>
        <li>
         Luxury décor collection
        </li>
        <li>
         Golf cart transportation
        </li>
        <li>
         Fire pit & s'mores bar
        </li>
        <li>
         Morning-after brunch setup
        </li>
       </ul>
       <button class="package-btn">
        Ultimate Experience
       </button>
      </div>
     </div>
    </div>
    
    CSS
    .packages-grid,
                .services-cards,
                .team-carousel,
                .blog-grid,
                .instagram-grid {
                    grid-template-columns: 1fr;
                }
    .featured:hover {
                transform: scale(1.05) translateY(-10px);
            }
    .package-header {
                background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
                padding: 30px;
                text-align: center;
                color: white;
            }
    .package-features {
                list-style: none;
                margin-bottom: 40px;
            }
    .package-card.featured:hover {
                transform: scale(1.05) translateY(-10px);
            }
    .package-card.featured::before {
                content: 'MOST POPULAR';
                position: absolute;
                top: 20px;
                right: -30px;
                background: var(--wine);
                color: white;
                padding: 8px 40px;
                transform: rotate(45deg);
                font-size: 12px;
                letter-spacing: 1px;
                z-index: 1;
            }
    .package-body {
                padding: 40px 30px;
            }
    .package-name {
                font-size: 28px;
                margin-bottom: 10px;
            }
    .package-features li {
                padding: 15px 0;
                border-bottom: 1px solid rgba(0,0,0,0.05);
                color: var(--text-dark);
                display: flex;
                align-items: center;
            }
    .featured {
                transform: scale(1.05);
                box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            }
    .package-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 25px 60px rgba(0,0,0,0.15);
            }
    .package-btn {
                width: 100%;
                padding: 18px;
                background: var(--accent-gold);
                color: white;
                border: none;
                border-radius: 50px;
                font-size: 16px;
                letter-spacing: 1px;
                cursor: pointer;
                transition: all 0.3s ease;
                text-transform: uppercase;
            }
    .package-card {
                background: white;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 15px 40px rgba(0,0,0,0.1);
                transition: all 0.4s ease;
                position: relative;
            }
    .packages-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: 40px;
            }
    .package-price {
                font-size: 42px;
                font-weight: bold;
                color: var(--accent-gold);
            }
    .featured::before {
                content: 'MOST POPULAR';
                position: absolute;
                top: 20px;
                right: -30px;
                background: var(--wine);
                color: white;
                padding: 8px 40px;
                transform: rotate(45deg);
                font-size: 12px;
                letter-spacing: 1px;
                z-index: 1;
            }
    .package-price span {
                font-size: 16px;
                color: rgba(255, 255, 255, 0.8);
                font-weight: normal;
            }
    .package-features li::before {
                content: '✓';
                color: var(--accent-gold);
                font-weight: bold;
                margin-right: 15px;
                font-size: 18px;
            }
    .package-card.featured {
                transform: scale(1.05);
                box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            }
    .package-btn:hover {
                background: var(--primary-brown);
                transform: translateY(-2px);
            }

Galleries - Blog Grid

GALLERIES html> comp-15

A galleries component containing images, links. Contains 33 child elements.

Fall wedding Real Weddings
October 15, 2024 5 min read

A Magical Fall Wedding: Sarah & Tom's Story

HTML
<div class="blog-grid">
 <article class="blog-card">
  <div class="blog-image">
   <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
   <span class="blog-category">
    Real Weddings
   </span>
  </div>
  <div class="blog-content">
   <div class="blog-meta">
    <span>
     October 15, 2024
    </span>
    <span>
     5 min read
    </span>
   </div>
   <h3 class="blog-title">
    A Magical Fall Wedding: Sarah & Tom's Story
   </h3>
   <p class="blog-excerpt">
    When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
   </p>
   <a class="read-more" href="#">
    Read Story
   </a>
  </div>
 </article>
 <article class="blog-card">
  <div class="blog-image">
   <img alt="Wedding planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
   <span class="blog-category">
    Planning Tips
   </span>
  </div>
  <div class="blog-content">
   <div class="blog-meta">
    <span>
     October 10, 2024
    </span>
    <span>
     3 min read
    </span>
   </div>
   <h3 class="blog-title">
    10 Ways to Personalize Your Barn Wedding
   </h3>
   <p class="blog-excerpt">
    From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
   </p>
   <a class="read-more" href="#">
    Read More
   </a>
  </div>
 </article>
 <article class="blog-card">
  <div class="blog-image">
   <img alt="Seasonal guide" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600"/>
   <span class="blog-category">
    Seasonal Guide
   </span>
  </div>
  <div class="blog-content">
   <div class="blog-meta">
    <span>
     October 5, 2024
    </span>
    <span>
     4 min read
    </span>
   </div>
   <h3 class="blog-title">
    Why Minnesota Summers Make Perfect Weddings
   </h3>
   <p class="blog-excerpt">
    Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
   </p>
   <a class="read-more" href="#">
    Read Guide
   </a>
  </div>
 </article>
</div>
CSS
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-image img {
            transform: scale(1.1);
        }
.blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
.blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Galleries - Instagram Grid

GALLERIES html> comp-16

A galleries component containing images. Contains 36 child elements.

Instagram post
1,247 Likes
Instagram post
HTML
<div class="instagram-grid">
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     1,247
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     892
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     2,103
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     1,567
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     934
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     3,421
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
</div>
CSS
.instagram-post {
            position: relative;
            padding-bottom: 100%;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
        }
.instagram-grid {
                grid-template-columns: 1fr;
            }
.instagram-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(44, 36, 22, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
.instagram-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
.instagram-post img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.instagram-post:hover .instagram-overlay {
            opacity: 1;
        }
.instagram-stats span {
            display: block;
            margin: 10px;
            font-size: 16px;
        }
.instagram-overlay {
            opacity: 1;
        }
.instagram-stats {
            text-align: center;
            color: white;
        }
.count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.instagram-post:hover img {
            transform: scale(1.1);
        }
.instagram-stats .count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Galleries - Instagram Section Section Shape Top Sh

GALLERIES html> comp-17

A galleries component containing images, links. Contains 41 child elements.

Follow Our Journey

@rumriverbarn
Instagram post
HTML
<section class="instagram-section section-shape-top shape--angle">
 <!-- Simple Angle Top -->
 <div class="container">
  <div class="instagram-header">
   <h2>
    Follow Our Journey
   </h2>
   <a class="instagram-handle" href="#">
    @rumriverbarn
   </a>
  </div>
  <div class="instagram-grid">
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       1,247
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       892
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       2,103
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       1,567
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       934
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       3,421
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>
CSS
.instagram-handle {
            color: var(--accent-gold);
            font-size: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
.instagram-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.instagram-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
.instagram-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(44, 36, 22, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
.instagram-post:hover .instagram-overlay {
            opacity: 1;
        }
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.instagram-stats span {
            display: block;
            margin: 10px;
            font-size: 16px;
        }
.instagram-stats {
            text-align: center;
            color: white;
        }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.instagram-section.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.container {
                padding: 0 20px;
            }
.instagram-overlay {
            opacity: 1;
        }
.instagram-header {
            text-align: center;
            margin-bottom: 60px;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.instagram-post:hover img {
            transform: scale(1.1);
        }
.count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.instagram-grid {
                grid-template-columns: 1fr;
            }
.instagram-post img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.section-shape-top { 
            position: relative; 
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.instagram-post {
            position: relative;
            padding-bottom: 100%;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
        }
.instagram-section {
            padding: 120px 0;
            background: var(--warm-cream);
            position: relative;
        }
.instagram-handle:hover {
            color: var(--primary-brown);
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.instagram-stats .count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Cards - Floating Card

CARDS html> comp-20

A cards component. Contains 2 child elements.

2025 Dates

Limited availability for peak season

...
HTML
<div class="floating-card">
 <h4>
  2025 Dates
 </h4>
 <p>
  Limited availability for peak season
 </p>
</div>
CSS
.floating-card p {
            color: var(--text-light);
            font-size: 14px;
        }
.floating-card {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            max-width: 200px;
        }
.floating-card h4 {
            color: var(--deep-brown);
            font-size: 20px;
            margin-bottom: 8px;
        }

Services Cards

CARDS html> comp-21

A cards component containing images. Contains 18 child elements.

Wedding
From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.

HTML
<div class="services-cards">
 <div class="service-card">
  <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $5,000
   </span>
   <h3 class="service-title">
    Weddings
   </h3>
   <p class="service-description">
    Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
   </p>
  </div>
 </div>
 <div class="service-card">
  <img alt="Corporate Event" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $2,000
   </span>
   <h3 class="service-title">
    Corporate Events
   </h3>
   <p class="service-description">
    Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
   </p>
  </div>
 </div>
 <div class="service-card">
  <img alt="Special Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $1,500
   </span>
   <h3 class="service-title">
    Celebrations
   </h3>
   <p class="service-description">
    Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
   </p>
  </div>
 </div>
</div>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }
.services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.services-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            position: relative;
            z-index: 1;
        }
.service-bg {
            transform: scale(1.1);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }

Cards - Service Card

CARDS html> comp-22

A cards component containing images. Contains 5 child elements.

Wedding
From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.

...
HTML
<div class="service-card">
 <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $5,000
  </span>
  <h3 class="service-title">
   Weddings
  </h3>
  <p class="service-description">
   Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
  </p>
 </div>
</div>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-bg {
            transform: scale(1.1);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }

Cards - Service Card

CARDS html> comp-23

A cards component containing images. Contains 5 child elements.

Corporate Event
From $2,000

Corporate Events

Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.

...
HTML
<div class="service-card">
 <img alt="Corporate Event" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $2,000
  </span>
  <h3 class="service-title">
   Corporate Events
  </h3>
  <p class="service-description">
   Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
  </p>
 </div>
</div>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-bg {
            transform: scale(1.1);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }

Cards - Service Card

CARDS html> comp-24

A cards component containing images. Contains 5 child elements.

Special Celebration
From $1,500

Celebrations

Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.

...
HTML
<div class="service-card">
 <img alt="Special Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $1,500
  </span>
  <h3 class="service-title">
   Celebrations
  </h3>
  <p class="service-description">
   Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
  </p>
 </div>
</div>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-bg {
            transform: scale(1.1);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }

Cards - Package Card

CARDS html> comp-25

A cards component containing buttons. Contains 12 child elements.

Intimate

$3,500 / up to 75 guests
  • 6-hour venue rental
  • Ceremony & reception spaces
  • Tables, chairs & linens
  • Bridal suite access
  • Setup & breakdown assistance
    HTML
    <div class="package-card">
     <div class="package-header">
      <h3 class="package-name">
       Intimate
      </h3>
      <div class="package-price">
       $3,500
       <span>
        / up to 75 guests
       </span>
      </div>
     </div>
     <div class="package-body">
      <ul class="package-features">
       <li>
        6-hour venue rental
       </li>
       <li>
        Ceremony & reception spaces
       </li>
       <li>
        Tables, chairs & linens
       </li>
       <li>
        Bridal suite access
       </li>
       <li>
        Setup & breakdown assistance
       </li>
      </ul>
      <button class="package-btn">
       Learn More
      </button>
     </div>
    </div>
    
    CSS
    .package-card.featured:hover {
                transform: scale(1.05) translateY(-10px);
            }
    .package-card.featured::before {
                content: 'MOST POPULAR';
                position: absolute;
                top: 20px;
                right: -30px;
                background: var(--wine);
                color: white;
                padding: 8px 40px;
                transform: rotate(45deg);
                font-size: 12px;
                letter-spacing: 1px;
                z-index: 1;
            }
    .package-body {
                padding: 40px 30px;
            }
    .package-name {
                font-size: 28px;
                margin-bottom: 10px;
            }
    .package-features {
                list-style: none;
                margin-bottom: 40px;
            }
    .package-features li {
                padding: 15px 0;
                border-bottom: 1px solid rgba(0,0,0,0.05);
                color: var(--text-dark);
                display: flex;
                align-items: center;
            }
    .package-price {
                font-size: 42px;
                font-weight: bold;
                color: var(--accent-gold);
            }
    .package-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 25px 60px rgba(0,0,0,0.15);
            }
    .package-btn {
                width: 100%;
                padding: 18px;
                background: var(--accent-gold);
                color: white;
                border: none;
                border-radius: 50px;
                font-size: 16px;
                letter-spacing: 1px;
                cursor: pointer;
                transition: all 0.3s ease;
                text-transform: uppercase;
            }
    .package-card {
                background: white;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 15px 40px rgba(0,0,0,0.1);
                transition: all 0.4s ease;
                position: relative;
            }
    .package-header {
                background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
                padding: 30px;
                text-align: center;
                color: white;
            }
    .package-price span {
                font-size: 16px;
                color: rgba(255, 255, 255, 0.8);
                font-weight: normal;
            }
    .package-features li::before {
                content: '✓';
                color: var(--accent-gold);
                font-weight: bold;
                margin-right: 15px;
                font-size: 18px;
            }
    .package-card.featured {
                transform: scale(1.05);
                box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            }
    .package-btn:hover {
                background: var(--primary-brown);
                transform: translateY(-2px);
            }

Cards - Package Card Featured

CARDS html> comp-26

A cards component containing buttons. Contains 13 child elements.

Cards - Package Card

CARDS html> comp-27

A cards component containing buttons. Contains 13 child elements.

Grand

$8,500 / up to 300 guests
  • Full weekend rental
  • All venue spaces included
  • Luxury décor collection
  • Golf cart transportation
  • Fire pit & s'mores bar
  • ...
HTML
<div class="package-card">
 <div class="package-header">
  <h3 class="package-name">
   Grand
  </h3>
  <div class="package-price">
   $8,500
   <span>
    / up to 300 guests
   </span>
  </div>
 </div>
 <div class="package-body">
  <ul class="package-features">
   <li>
    Full weekend rental
   </li>
   <li>
    All venue spaces included
   </li>
   <li>
    Luxury décor collection
   </li>
   <li>
    Golf cart transportation
   </li>
   <li>
    Fire pit & s'mores bar
   </li>
   <li>
    Morning-after brunch setup
   </li>
  </ul>
  <button class="package-btn">
   Ultimate Experience
  </button>
 </div>
</div>
CSS
.package-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.package-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.package-body {
            padding: 40px 30px;
        }
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.package-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            position: relative;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-card.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Blog Card

CARDS html> comp-28

A cards component containing images, links. Contains 10 child elements.

Fall wedding Real Weddings
October 15, 2024 5 min read

A Magical Fall Wedding: Sarah & Tom's Story

When the autumn leaves ...

HTML
<article class="blog-card">
 <div class="blog-image">
  <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
  <span class="blog-category">
   Real Weddings
  </span>
 </div>
 <div class="blog-content">
  <div class="blog-meta">
   <span>
    October 15, 2024
   </span>
   <span>
    5 min read
   </span>
  </div>
  <h3 class="blog-title">
   A Magical Fall Wedding: Sarah & Tom's Story
  </h3>
  <p class="blog-excerpt">
   When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
  </p>
  <a class="read-more" href="#">
   Read Story
  </a>
 </div>
</article>
CSS
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.blog-image img {
            transform: scale(1.1);
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Cards - Blog Card

CARDS html> comp-29

A cards component containing images, links. Contains 10 child elements.

Wedding planning Planning Tips
October 10, 2024 3 min read

10 Ways to Personalize Your Barn Wedding

From custom signage to fam...

HTML
<article class="blog-card">
 <div class="blog-image">
  <img alt="Wedding planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
  <span class="blog-category">
   Planning Tips
  </span>
 </div>
 <div class="blog-content">
  <div class="blog-meta">
   <span>
    October 10, 2024
   </span>
   <span>
    3 min read
   </span>
  </div>
  <h3 class="blog-title">
   10 Ways to Personalize Your Barn Wedding
  </h3>
  <p class="blog-excerpt">
   From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
  </p>
  <a class="read-more" href="#">
   Read More
  </a>
 </div>
</article>
CSS
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.blog-image img {
            transform: scale(1.1);
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Cards - Blog Card

CARDS html> comp-30

A cards component containing images, links. Contains 10 child elements.

Seasonal guide Seasonal Guide
October 5, 2024 4 min read

Why Minnesota Summers Make Perfect Weddings

Long golden hours, warm b...

HTML
<article class="blog-card">
 <div class="blog-image">
  <img alt="Seasonal guide" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600"/>
  <span class="blog-category">
   Seasonal Guide
  </span>
 </div>
 <div class="blog-content">
  <div class="blog-meta">
   <span>
    October 5, 2024
   </span>
   <span>
    4 min read
   </span>
  </div>
  <h3 class="blog-title">
   Why Minnesota Summers Make Perfect Weddings
  </h3>
  <p class="blog-excerpt">
   Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
  </p>
  <a class="read-more" href="#">
   Read Guide
  </a>
 </div>
</article>
CSS
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.blog-image img {
            transform: scale(1.1);
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Cards - Services Reveal Section Shape Top Shape An

CARDS html> comp-31

A cards component containing images. Contains 23 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations, we're here for all of life's milestones

Wedding
HTML
<section class="services-reveal section-shape-top shape--angle">
 <div class="container">
  <div class="services-header">
   <h2>
    Celebrate Every Moment
   </h2>
   <p class="subtitle">
    From intimate gatherings to grand celebrations, we're here for all of life's milestones
   </p>
  </div>
  <div class="services-cards">
   <div class="service-card">
    <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $5,000
     </span>
     <h3 class="service-title">
      Weddings
     </h3>
     <p class="service-description">
      Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Corporate Event" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $2,000
     </span>
     <h3 class="service-title">
      Corporate Events
     </h3>
     <p class="service-description">
      Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Special Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $1,500
     </span>
     <h3 class="service-title">
      Celebrations
     </h3>
     <p class="service-description">
      Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Soft Curve Divider Bottom -->
</section>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.services-header .subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.service-title {
            transform: translateY(-10px);
        }
.service-bg {
            transform: scale(1.1);
        }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.container {
                padding: 0 20px;
            }
.subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }
.section-shape-top { 
            position: relative; 
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.services-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 1;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.services-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.services-reveal {
            padding: 120px 0;
            background-image: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="rgba(139, 99, 55, 0.05)"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>'), linear-gradient(180deg, var(--warm-cream) 0%, white 100%);
            background-repeat: repeat, no-repeat;
            background-size: 60px 60px, 100% 100%;
            background-position: top left, center;
            position: relative;
        }
.services-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            position: relative;
            z-index: 1;
        }

Cards - Service Overlay

CARDS html> comp-35

A cards component. Contains 3 child elements.

From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.

...
HTML
<div class="service-overlay">
 <span class="service-price">
  From $5,000
 </span>
 <h3 class="service-title">
  Weddings
 </h3>
 <p class="service-description">
  Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
 </p>
</div>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }

Cards - Service Overlay

CARDS html> comp-37

A cards component. Contains 3 child elements.

From $2,000

Corporate Events

Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.

...
HTML
<div class="service-overlay">
 <span class="service-price">
  From $2,000
 </span>
 <h3 class="service-title">
  Corporate Events
 </h3>
 <p class="service-description">
  Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
 </p>
</div>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }

Cards - Service Overlay

CARDS html> comp-39

A cards component. Contains 3 child elements.

From $1,500

Celebrations

Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.

...
HTML
<div class="service-overlay">
 <span class="service-price">
  From $1,500
 </span>
 <h3 class="service-title">
  Celebrations
 </h3>
 <p class="service-description">
  Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
 </p>
</div>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }

Cards - Packages Section Section Shape Top Shape S

CARDS html> comp-40

A cards component containing buttons. Contains 46 child elements.

Investment in Memories

Wedding Packages

Intimate

$3,500 / up to 75 guests
HTML
<section class="packages-section section-shape-top shape--split">
 <div class="container">
  <div class="packages-header">
   <p class="script-font">
    Investment in Memories
   </p>
   <h2>
    Wedding Packages
   </h2>
  </div>
  <div class="packages-grid">
   <div class="package-card">
    <div class="package-header">
     <h3 class="package-name">
      Intimate
     </h3>
     <div class="package-price">
      $3,500
      <span>
       / up to 75 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       6-hour venue rental
      </li>
      <li>
       Ceremony & reception spaces
      </li>
      <li>
       Tables, chairs & linens
      </li>
      <li>
       Bridal suite access
      </li>
      <li>
       Setup & breakdown assistance
      </li>
     </ul>
     <button class="package-btn">
      Learn More
     </button>
    </div>
   </div>
   <div class="package-card featured">
    <div class="package-header">
     <h3 class="package-name">
      Classic
     </h3>
     <div class="package-price">
      $5,500
      <span>
       / up to 150 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       10-hour venue rental
      </li>
      <li>
       Full property access
      </li>
      <li>
       Premium décor package
      </li>
      <li>
       Both suites included
      </li>
      <li>
       Day-before setup time
      </li>
      <li>
       Complimentary rehearsal
      </li>
     </ul>
     <button class="package-btn">
      Most Popular Choice
     </button>
    </div>
   </div>
   <div class="package-card">
    <div class="package-header">
     <h3 class="package-name">
      Grand
     </h3>
     <div class="package-price">
      $8,500
      <span>
       / up to 300 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       Full weekend rental
      </li>
      <li>
       All venue spaces included
      </li>
      <li>
       Luxury décor collection
      </li>
      <li>
       Golf cart transportation
      </li>
      <li>
       Fire pit & s'mores bar
      </li>
      <li>
       Morning-after brunch setup
      </li>
     </ul>
     <button class="package-btn">
      Ultimate Experience
     </button>
    </div>
   </div>
  </div>
 </div>
</section>
CSS
.packages-grid,
            .services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.script-font {
            color: var(--accent-gold);
        }
.script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.packages-section.section-shape-top::after {
  background: var(--soft-white) !important;
}
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.package-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.package-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-body {
            padding: 40px 30px;
        }
.container {
                padding: 0 20px;
            }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            position: relative;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.packages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }
.section-shape-top { 
            position: relative; 
        }
.packages-section {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--soft-white) 0%, var(--warm-cream) 100%);
            position: relative;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.packages-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.shape--split { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0 L0,40 L600,70 L1200,40 L1200,0 L1200,120 L0,120 Z" fill="white"/></svg>'); 
            --shape-h: 60px;
        }
.packages-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.packages-header {
            text-align: center;
            margin-bottom: 80px;
        }
.package-card.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Body

CARDS html> comp-45

A cards component containing buttons. Contains 7 child elements.

  • 6-hour venue rental
  • Ceremony & reception spaces
  • Tables, chairs & linens
  • Bridal suite access
  • Setup & breakdown assistance
...
HTML
<div class="package-body">
 <ul class="package-features">
  <li>
   6-hour venue rental
  </li>
  <li>
   Ceremony & reception spaces
  </li>
  <li>
   Tables, chairs & linens
  </li>
  <li>
   Bridal suite access
  </li>
  <li>
   Setup & breakdown assistance
  </li>
 </ul>
 <button class="package-btn">
  Learn More
 </button>
</div>
CSS
.package-body {
            padding: 40px 30px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Features

CARDS html> comp-46

A cards component. Contains 5 child elements.

  • 6-hour venue rental
  • Ceremony & reception spaces
  • Tables, chairs & linens
  • Bridal suite access
  • Setup & breakdown assistance
...
HTML
<ul class="package-features">
 <li>
  6-hour venue rental
 </li>
 <li>
  Ceremony & reception spaces
 </li>
 <li>
  Tables, chairs & linens
 </li>
 <li>
  Bridal suite access
 </li>
 <li>
  Setup & breakdown assistance
 </li>
</ul>
CSS
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }

Cards - Package Body

CARDS html> comp-49

A cards component containing buttons. Contains 8 child elements.

  • 10-hour venue rental
  • Full property access
  • Premium décor package
  • Both suites included
  • Day-before setup time
  • Complimentary rehearsal
...
HTML
<div class="package-body">
 <ul class="package-features">
  <li>
   10-hour venue rental
  </li>
  <li>
   Full property access
  </li>
  <li>
   Premium décor package
  </li>
  <li>
   Both suites included
  </li>
  <li>
   Day-before setup time
  </li>
  <li>
   Complimentary rehearsal
  </li>
 </ul>
 <button class="package-btn">
  Most Popular Choice
 </button>
</div>
CSS
.package-body {
            padding: 40px 30px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Features

CARDS html> comp-50

A cards component. Contains 6 child elements.

  • 10-hour venue rental
  • Full property access
  • Premium décor package
  • Both suites included
  • Day-before setup time
  • Complimentary rehearsal
...
HTML
<ul class="package-features">
 <li>
  10-hour venue rental
 </li>
 <li>
  Full property access
 </li>
 <li>
  Premium décor package
 </li>
 <li>
  Both suites included
 </li>
 <li>
  Day-before setup time
 </li>
 <li>
  Complimentary rehearsal
 </li>
</ul>
CSS
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }

Cards - Package Body

CARDS html> comp-53

A cards component containing buttons. Contains 8 child elements.

  • Full weekend rental
  • All venue spaces included
  • Luxury décor collection
  • Golf cart transportation
  • Fire pit & s'mores bar
  • Morning-after brunch setup
...
HTML
<div class="package-body">
 <ul class="package-features">
  <li>
   Full weekend rental
  </li>
  <li>
   All venue spaces included
  </li>
  <li>
   Luxury décor collection
  </li>
  <li>
   Golf cart transportation
  </li>
  <li>
   Fire pit & s'mores bar
  </li>
  <li>
   Morning-after brunch setup
  </li>
 </ul>
 <button class="package-btn">
  Ultimate Experience
 </button>
</div>
CSS
.package-body {
            padding: 40px 30px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Features

CARDS html> comp-54

A cards component. Contains 6 child elements.

  • Full weekend rental
  • All venue spaces included
  • Luxury décor collection
  • Golf cart transportation
  • Fire pit & s'mores bar
  • Morning-after brunch setup
...
HTML
<ul class="package-features">
 <li>
  Full weekend rental
 </li>
 <li>
  All venue spaces included
 </li>
 <li>
  Luxury décor collection
 </li>
 <li>
  Golf cart transportation
 </li>
 <li>
  Fire pit & s'mores bar
 </li>
 <li>
  Morning-after brunch setup
 </li>
</ul>
CSS
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }

Sections - Alternating Blocks Section Shape Top Sh

SECTIONS html> comp-55

A sections component containing images, buttons, links. Contains 43 child elements.

01

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.

  • Climate-...
HTML
<section class="alternating-blocks section-shape-top shape--subtle-wave">
 <div class="container">
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     01
    </div>
    <h3>
     The Historic Barn
    </h3>
    <p>
     Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.
    </p>
    <ul class="feature-list">
     <li>
      Climate-controlled comfort year-round
     </li>
     <li>
      Original exposed beam architecture
     </li>
     <li>
      Capacity for up to 300 guests
     </li>
     <li>
      State-of-the-art lighting system
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Explore The Barn
    </a>
   </div>
   <div class="block-image">
    <img alt="Historic barn interior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=800"/>
    <span class="image-badge">
     100+ Years
    </span>
   </div>
  </div>
  <div class="block-item reverse">
   <div class="block-content">
    <div class="number">
     02
    </div>
    <h3>
     Vineyard Ceremonies
    </h3>
    <p>
     Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.
    </p>
    <ul class="feature-list">
     <li>
      Sunset ceremony perfection
     </li>
     <li>
      Natural amphitheater setting
     </li>
     <li>
      Rain backup in covered pavilion
     </li>
     <li>
      Complimentary wine tasting for couples
     </li>
    </ul>
    <a class="btn-outline" href="#">
     View Ceremony Sites
    </a>
   </div>
   <div class="block-image">
    <img alt="Vineyard ceremony site" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=800"/>
    <span class="image-badge">
     5 Locations
    </span>
   </div>
  </div>
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     03
    </div>
    <h3>
     Enchanted Forest
    </h3>
    <p>
     Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.
    </p>
    <ul class="feature-list">
     <li>
      Professional trail lighting available
     </li>
     <li>
      Hidden clearings for portraits
     </li>
     <li>
      Seasonal wildflower meadows
     </li>
     <li>
      Private couple's photography hour
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Discover The Grounds
    </a>
   </div>
   <div class="block-image">
    <img alt="Forest wedding photos" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
    <span class="image-badge">
     400 Acres
    </span>
   </div>
  </div>
 </div>
 <!-- Angle Divider Bottom -->
</section>
CSS
.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.block-item:last-child {
            margin-bottom: 0;
        }
.alternating-blocks .btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.alternating-blocks p,
        .alternating-blocks .feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.reverse {
            direction: rtl;
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.reverse {
                direction: ltr;
            }
.reverse .block-content {
            direction: ltr;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.alternating-blocks.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.section-shape-top { 
            position: relative; 
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.alternating-blocks .btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.alternating-blocks {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-bg) 0%, var(--medium-bg) 100%);
            position: relative;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.shape--subtle-wave { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V40c240,20,480,20,720,0s480-20,480,0v80H0Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.alternating-blocks h3,
        .alternating-blocks .number {
            color: white;
        }

Sections - Team Section Section Shape Top Shape Su

SECTIONS html> comp-59

A sections component containing images. Contains 29 child elements.

Meet Your Hosts

The Family Behind the Farm

Sections - Blog Section Section Shape Top Shape An

SECTIONS html> comp-60

A sections component containing images, buttons, links. Contains 40 child elements.

Stories from the Barn

Wedding inspiration, planning tips, and real celebrations

View All Posts
Fall wedding
HTML
<section class="blog-section section-shape-top shape--angle">
 <div class="container">
  <div class="blog-header">
   <div class="blog-header-text">
    <h2>
     Stories from the Barn
    </h2>
    <p>
     Wedding inspiration, planning tips, and real celebrations
    </p>
   </div>
   <a class="btn-outline" href="#">
    View All Posts
   </a>
  </div>
  <div class="blog-grid">
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
     <span class="blog-category">
      Real Weddings
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 15, 2024
      </span>
      <span>
       5 min read
      </span>
     </div>
     <h3 class="blog-title">
      A Magical Fall Wedding: Sarah & Tom's Story
     </h3>
     <p class="blog-excerpt">
      When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
     </p>
     <a class="read-more" href="#">
      Read Story
     </a>
    </div>
   </article>
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Wedding planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
     <span class="blog-category">
      Planning Tips
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 10, 2024
      </span>
      <span>
       3 min read
      </span>
     </div>
     <h3 class="blog-title">
      10 Ways to Personalize Your Barn Wedding
     </h3>
     <p class="blog-excerpt">
      From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
     </p>
     <a class="read-more" href="#">
      Read More
     </a>
    </div>
   </article>
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Seasonal guide" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600"/>
     <span class="blog-category">
      Seasonal Guide
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 5, 2024
      </span>
      <span>
       4 min read
      </span>
     </div>
     <h3 class="blog-title">
      Why Minnesota Summers Make Perfect Weddings
     </h3>
     <p class="blog-excerpt">
      Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
     </p>
     <a class="read-more" href="#">
      Read Guide
     </a>
    </div>
   </article>
  </div>
 </div>
 <!-- Soft Curve Bottom to Sage -->
</section>
CSS
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.blog-section.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.blog-header-text p {
            color: var(--text-light);
            font-size: 18px;
        }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.blog-content {
            padding: 35px;
        }
.blog-image img {
            transform: scale(1.1);
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.read-more:hover {
            color: var(--primary-brown);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            flex-wrap: wrap;
            gap: 30px;
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.blog-section {
            padding: 120px 0;
            background: white;
            position: relative;
        }
.blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
.section-shape-top { 
            position: relative; 
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-header-text h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 10px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.blog-header {
                flex-direction: column;
                align-items: flex-start;
            }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }

Sections - Map Section

SECTIONS html> comp-62

A sections component. Contains 33 child elements.

Find Your Way to Forever

📍

Address

12500 Rum River Drive
Princeton, MN 55371

...
HTML
<section class="map-section">
 <div class="map-container">
  <div class="map-info">
   <h2>
    Find Your Way to Forever
   </h2>
   <div class="location-details">
    <div class="location-item">
     <div class="location-icon">
      📍
     </div>
     <div class="location-text">
      <h4>
       Address
      </h4>
      <p>
       12500 Rum River Drive
       <br/>
       Princeton, MN 55371
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      🚗
     </div>
     <div class="location-text">
      <h4>
       Easy Access From
      </h4>
      <p>
       45 min from Minneapolis
       <br/>
       30 min from St. Cloud
       <br/>
       1 hour from Brainerd
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      ✈️
     </div>
     <div class="location-text">
      <h4>
       Nearest Airport
      </h4>
      <p>
       Minneapolis-St. Paul International
       <br/>
       55 miles (1 hour drive)
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      🏨
     </div>
     <div class="location-text">
      <h4>
       Accommodations
      </h4>
      <p>
       Partner hotels in Princeton & Milaca
       <br/>
       Group rates available
      </p>
     </div>
    </div>
   </div>
  </div>
  <div class="map-embed">
   <div class="map-placeholder">
    <p>
     Interactive Map
    </p>
    <p style="font-size: 16px; margin-top: 10px;">
     Click to view on Google Maps
    </p>
   </div>
  </div>
 </div>
</section>
CSS
.location-details {
            margin-bottom: 40px;
        }
.map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.map-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 600px;
        }
.map-info {
                padding: 40px 20px;
            }
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.map-info {
            padding: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.map-embed {
            background: var(--deep-brown);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            position: relative;
            overflow: hidden;
        }
.map-section {
            padding: 0;
            background: var(--warm-cream);
            position: relative;
        }
.map-info h2 {
            font-size: 42px;
            color: var(--deep-brown);
            margin-bottom: 30px;
        }
.map-section.section-shape-top::after {
  background: var(--soft-white) !important;
}
.map-placeholder {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.map-embed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
        }

Sections - Social Proof

SECTIONS html> comp-70

A sections component. Contains 9 child elements.

Sections - Feature List

SECTIONS html> comp-73

A sections component. Contains 4 child elements.

  • Climate-controlled comfort year-round
  • Original exposed beam architecture
  • Capacity for up to 300 guests
  • State-of-the-art lighting system
...
HTML
<ul class="feature-list">
 <li>
  Climate-controlled comfort year-round
 </li>
 <li>
  Original exposed beam architecture
 </li>
 <li>
  Capacity for up to 300 guests
 </li>
 <li>
  State-of-the-art lighting system
 </li>
</ul>
CSS
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }

Sections - Feature List

SECTIONS html> comp-74

A sections component. Contains 4 child elements.

  • Sunset ceremony perfection
  • Natural amphitheater setting
  • Rain backup in covered pavilion
  • Complimentary wine tasting for couples
...
HTML
<ul class="feature-list">
 <li>
  Sunset ceremony perfection
 </li>
 <li>
  Natural amphitheater setting
 </li>
 <li>
  Rain backup in covered pavilion
 </li>
 <li>
  Complimentary wine tasting for couples
 </li>
</ul>
CSS
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }

Sections - Feature List

SECTIONS html> comp-75

A sections component. Contains 4 child elements.

  • Professional trail lighting available
  • Hidden clearings for portraits
  • Seasonal wildflower meadows
  • Private couple's photography hour
...
HTML
<ul class="feature-list">
 <li>
  Professional trail lighting available
 </li>
 <li>
  Hidden clearings for portraits
 </li>
 <li>
  Seasonal wildflower meadows
 </li>
 <li>
  Private couple's photography hour
 </li>
</ul>
CSS
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }

Sections - Venue Features

SECTIONS html> comp-76

A sections component. Contains 12 child elements.

Capacity

Up to 300 guests

Features

Built-in bar & dance floor

Lighting

Edison bulbs & chandeliers

Climate

Heated & air conditioned

...
HTML
<div class="venue-features">
 <div class="venue-feature">
  <h5>
   Capacity
  </h5>
  <p>
   Up to 300 guests
  </p>
 </div>
 <div class="venue-feature">
  <h5>
   Features
  </h5>
  <p>
   Built-in bar & dance floor
  </p>
 </div>
 <div class="venue-feature">
  <h5>
   Lighting
  </h5>
  <p>
   Edison bulbs & chandeliers
  </p>
 </div>
 <div class="venue-feature">
  <h5>
   Climate
  </h5>
  <p>
   Heated & air conditioned
  </p>
 </div>
</div>
CSS
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Venue Feature

SECTIONS html> comp-77

A sections component. Contains 2 child elements.

Capacity

Up to 300 guests

...
HTML
<div class="venue-feature">
 <h5>
  Capacity
 </h5>
 <p>
  Up to 300 guests
 </p>
</div>
CSS
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Venue Feature

SECTIONS html> comp-78

A sections component. Contains 2 child elements.

Features

Built-in bar & dance floor

...
HTML
<div class="venue-feature">
 <h5>
  Features
 </h5>
 <p>
  Built-in bar & dance floor
 </p>
</div>
CSS
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Venue Feature

SECTIONS html> comp-79

A sections component. Contains 2 child elements.

Lighting

Edison bulbs & chandeliers

...
HTML
<div class="venue-feature">
 <h5>
  Lighting
 </h5>
 <p>
  Edison bulbs & chandeliers
 </p>
</div>
CSS
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Venue Feature

SECTIONS html> comp-80

A sections component. Contains 2 child elements.

Climate

Heated & air conditioned

...
HTML
<div class="venue-feature">
 <h5>
  Climate
 </h5>
 <p>
  Heated & air conditioned
 </p>
</div>
CSS
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Block Content

SECTIONS html> comp-86

A sections component containing buttons, links. Contains 9 child elements.

01

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.

  • Climate-controlled comfort year-round
  • Original exposed beam architecture
  • Capacity for up to 300 guests
  • State-of-the-art...
HTML
<div class="block-content">
 <div class="number">
  01
 </div>
 <h3>
  The Historic Barn
 </h3>
 <p>
  Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.
 </p>
 <ul class="feature-list">
  <li>
   Climate-controlled comfort year-round
  </li>
  <li>
   Original exposed beam architecture
  </li>
  <li>
   Capacity for up to 300 guests
  </li>
  <li>
   State-of-the-art lighting system
  </li>
 </ul>
 <a class="btn-outline" href="#">
  Explore The Barn
 </a>
</div>
CSS
.block-content {
            padding: 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.number {
            color: white;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Sections - Block Content

SECTIONS html> comp-87

A sections component containing buttons, links. Contains 9 child elements.

02

Vineyard Ceremonies

Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.

  • Sunset ceremony perfection
  • Natural amphitheater setting
  • Rain backup in covered pavilion
  • Complimentary wine tasting for couples
  • HTML
    <div class="block-content">
     <div class="number">
      02
     </div>
     <h3>
      Vineyard Ceremonies
     </h3>
     <p>
      Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.
     </p>
     <ul class="feature-list">
      <li>
       Sunset ceremony perfection
      </li>
      <li>
       Natural amphitheater setting
      </li>
      <li>
       Rain backup in covered pavilion
      </li>
      <li>
       Complimentary wine tasting for couples
      </li>
     </ul>
     <a class="btn-outline" href="#">
      View Ceremony Sites
     </a>
    </div>
    
    CSS
    .block-content {
                padding: 40px;
            }
    .feature-list {
                list-style: none;
                margin-bottom: 30px;
            }
    .block-content h3 {
                font-size: 42px;
                margin-bottom: 25px;
            }
    .feature-list li {
                padding: 12px 0;
                position: relative;
                padding-left: 30px;
            }
    .block-content p {
                font-size: 17px;
                line-height: 1.8;
                margin-bottom: 30px;
            }
    .number {
                font-size: 80px;
                color: var(--accent-gold);
                opacity: 0.5;
                font-weight: bold;
                line-height: 1;
                margin-bottom: 20px;
            }
    .btn-outline-light {
                border-color: white;
                color: white;
            }
    .btn-outline-light:hover {
                background: white;
                color: var(--deep-brown);
            }
    .number {
                color: white;
            }
    .btn-outline {
                border-color: var(--accent-gold);
                color: var(--accent-gold);
            }
    .feature-list li {
                color: rgba(255, 255, 255, 0.8);
            }
    .feature-list li::before {
                content: '✓';
                position: absolute;
                left: 0;
                color: var(--accent-gold);
                font-weight: bold;
                font-size: 18px;
            }
    .block-content {
                direction: ltr;
            }
    .btn-outline:hover {
                background: var(--primary-brown);
                color: white;
                transform: translateY(-2px);
            }
    .btn-outline:hover {
                background: var(--accent-gold);
                color: white;
            }
    .block-content .number {
                font-size: 80px;
                color: var(--accent-gold);
                opacity: 0.5;
                font-weight: bold;
                line-height: 1;
                margin-bottom: 20px;
            }
    .btn-outline {
                padding: 15px 35px;
                border: 2px solid var(--primary-brown);
                color: var(--primary-brown);
                text-decoration: none;
                border-radius: 50px;
                transition: all 0.3s ease;
                font-size: 14px;
                letter-spacing: 1px;
                text-transform: uppercase;
            }

Sections - Block Content

SECTIONS html> comp-88

A sections component containing buttons, links. Contains 9 child elements.

03

Enchanted Forest

Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.

  • Professional trail lighting available
  • Hidden clearings for portraits
  • Seasonal wildflower meadows
  • Private couple's photography hour <...
HTML
<div class="block-content">
 <div class="number">
  03
 </div>
 <h3>
  Enchanted Forest
 </h3>
 <p>
  Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.
 </p>
 <ul class="feature-list">
  <li>
   Professional trail lighting available
  </li>
  <li>
   Hidden clearings for portraits
  </li>
  <li>
   Seasonal wildflower meadows
  </li>
  <li>
   Private couple's photography hour
  </li>
 </ul>
 <a class="btn-outline" href="#">
  Discover The Grounds
 </a>
</div>
CSS
.block-content {
            padding: 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.number {
            color: white;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Sections - Container Venue Content

SECTIONS html> comp-89

A sections component containing images, buttons. Contains 27 child elements.

Explore Our Spaces

Every corner tells a story, every space creates memories

HTML
<div class="container venue-content">
 <div class="venue-header">
  <h2>
   Explore Our Spaces
  </h2>
  <p>
   Every corner tells a story, every space creates memories
  </p>
 </div>
 <div class="venue-tabs">
  <button class="venue-tab active">
   The Barn
  </button>
  <button class="venue-tab">
   Bridal Suite
  </button>
  <button class="venue-tab">
   Groom's Quarters
  </button>
  <button class="venue-tab">
   Garden Pavilion
  </button>
 </div>
 <div class="venue-display">
  <div class="venue-main-image">
   <img alt="Barn interior" src="https://images.unsplash.com/photo-1564069114553-7215e1ff1890?w=800"/>
  </div>
  <div class="venue-details">
   <h3>
    The Historic Barn
   </h3>
   <p>
    Our crown jewel, this beautifully restored barn features soaring ceilings, original timber beams, and modern amenities seamlessly integrated into its historic charm.
   </p>
   <div class="venue-features">
    <div class="venue-feature">
     <h5>
      Capacity
     </h5>
     <p>
      Up to 300 guests
     </p>
    </div>
    <div class="venue-feature">
     <h5>
      Features
     </h5>
     <p>
      Built-in bar & dance floor
     </p>
    </div>
    <div class="venue-feature">
     <h5>
      Lighting
     </h5>
     <p>
      Edison bulbs & chandeliers
     </p>
    </div>
    <div class="venue-feature">
     <h5>
      Climate
     </h5>
     <p>
      Heated & air conditioned
     </p>
    </div>
   </div>
  </div>
 </div>
</div>
CSS
.venue-tabs {
                flex-direction: column;
                align-items: center;
            }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-tab {
            padding: 15px 35px;
            background: transparent;
            border: 2px solid var(--accent-gold);
            color: var(--accent-gold);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.venue-display {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 60px;
            align-items: center;
        }
.venue-header {
            text-align: center;
            margin-bottom: 80px;
        }
.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.container {
                padding: 0 20px;
            }
.venue-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.venue-tab.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.venue-main-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-content {
            position: relative;
            z-index: 1;
        }
.venue-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.venue-header p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
        }
.venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.venue-details p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
        }
.venue-details {
            color: white;
        }
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-main-image {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.3);
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }
.venue-details h3 {
            font-size: 36px;
            margin-bottom: 25px;
            color: var(--accent-gold);
        }

Sections - Blog Content

SECTIONS html> comp-90

A sections component containing links. Contains 6 child elements.

October 15, 2024 5 min read

A Magical Fall Wedding: Sarah & Tom's Story

When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...

Read Story
...
HTML
<div class="blog-content">
 <div class="blog-meta">
  <span>
   October 15, 2024
  </span>
  <span>
   5 min read
  </span>
 </div>
 <h3 class="blog-title">
  A Magical Fall Wedding: Sarah & Tom's Story
 </h3>
 <p class="blog-excerpt">
  When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
 </p>
 <a class="read-more" href="#">
  Read Story
 </a>
</div>
CSS
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Sections - Blog Content

SECTIONS html> comp-91

A sections component containing links. Contains 6 child elements.

October 10, 2024 3 min read

10 Ways to Personalize Your Barn Wedding

From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...

Read More
...
HTML
<div class="blog-content">
 <div class="blog-meta">
  <span>
   October 10, 2024
  </span>
  <span>
   3 min read
  </span>
 </div>
 <h3 class="blog-title">
  10 Ways to Personalize Your Barn Wedding
 </h3>
 <p class="blog-excerpt">
  From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
 </p>
 <a class="read-more" href="#">
  Read More
 </a>
</div>
CSS
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Sections - Blog Content

SECTIONS html> comp-92

A sections component containing links. Contains 6 child elements.

October 5, 2024 4 min read

Why Minnesota Summers Make Perfect Weddings

Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...

Read Guide
...
HTML
<div class="blog-content">
 <div class="blog-meta">
  <span>
   October 5, 2024
  </span>
  <span>
   4 min read
  </span>
 </div>
 <h3 class="blog-title">
  Why Minnesota Summers Make Perfect Weddings
 </h3>
 <p class="blog-excerpt">
  Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
 </p>
 <a class="read-more" href="#">
  Read Guide
 </a>
</div>
CSS
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Sections - Container Social Content

SECTIONS html> comp-93

A sections component. Contains 8 child elements.

HTML
<div class="container social-content">
 <div class="social-logos">
  <span class="social-logo">
   The Knot
  </span>
  <span class="social-logo">
   WeddingWire
  </span>
  <span class="social-logo">
   Martha Stewart
  </span>
  <span class="social-logo">
   Minnesota Bride
  </span>
 </div>
 <p class="social-text">
  "Rum River Barn isn't just a venue—it's
  <span class="highlight">
   where dreams come to life
  </span>
  . 
                Their commitment to saying 'yes' to every couple's vision sets them apart as
  <span class="highlight">
   Minnesota's most accommodating wedding destination
  </span>
  ."
 </p>
</div>
CSS
.social-content {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.social-text {
            font-size: 32px;
            color: white;
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.4;
        }
.social-logos {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-bottom: 40px;
            flex-wrap: wrap;
            opacity: 0.6;
        }
.container {
                padding: 0 20px;
            }
.social-text .highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.social-logo {
            color: white;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

Sections - Block Item

SECTIONS html> comp-95

A sections component containing images, buttons, links. Contains 13 child elements.

01

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.

  • Climate-controlled comfort year-round
  • Original exposed beam architecture
  • Capacity for up to 3...
HTML
<div class="block-item">
 <div class="block-content">
  <div class="number">
   01
  </div>
  <h3>
   The Historic Barn
  </h3>
  <p>
   Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.
  </p>
  <ul class="feature-list">
   <li>
    Climate-controlled comfort year-round
   </li>
   <li>
    Original exposed beam architecture
   </li>
   <li>
    Capacity for up to 300 guests
   </li>
   <li>
    State-of-the-art lighting system
   </li>
  </ul>
  <a class="btn-outline" href="#">
   Explore The Barn
  </a>
 </div>
 <div class="block-image">
  <img alt="Historic barn interior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=800"/>
  <span class="image-badge">
   100+ Years
  </span>
 </div>
</div>
CSS
.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.block-item:last-child {
            margin-bottom: 0;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }

Sections - Block Item Reverse

SECTIONS html> comp-97

A sections component containing images, buttons, links. Contains 13 child elements.

02

Vineyard Ceremonies

Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.

  • Sunset ceremony perfection
  • Natural amphitheater setting
  • Rain backup in covered pavilion
  • ...
HTML
<div class="block-item reverse">
 <div class="block-content">
  <div class="number">
   02
  </div>
  <h3>
   Vineyard Ceremonies
  </h3>
  <p>
   Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.
  </p>
  <ul class="feature-list">
   <li>
    Sunset ceremony perfection
   </li>
   <li>
    Natural amphitheater setting
   </li>
   <li>
    Rain backup in covered pavilion
   </li>
   <li>
    Complimentary wine tasting for couples
   </li>
  </ul>
  <a class="btn-outline" href="#">
   View Ceremony Sites
  </a>
 </div>
 <div class="block-image">
  <img alt="Vineyard ceremony site" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=800"/>
  <span class="image-badge">
   5 Locations
  </span>
 </div>
</div>
CSS
.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.block-item:last-child {
            margin-bottom: 0;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.reverse {
            direction: rtl;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.reverse {
                direction: ltr;
            }
.reverse .block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }

Sections - Block Item

SECTIONS html> comp-99

A sections component containing images, buttons, links. Contains 13 child elements.

03

Enchanted Forest

Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.

  • Professional trail lighting available
  • Hidden clearings for portraits
  • Seasonal wildflower meadows
  • ...
HTML
<div class="block-item">
 <div class="block-content">
  <div class="number">
   03
  </div>
  <h3>
   Enchanted Forest
  </h3>
  <p>
   Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.
  </p>
  <ul class="feature-list">
   <li>
    Professional trail lighting available
   </li>
   <li>
    Hidden clearings for portraits
   </li>
   <li>
    Seasonal wildflower meadows
   </li>
   <li>
    Private couple's photography hour
   </li>
  </ul>
  <a class="btn-outline" href="#">
   Discover The Grounds
  </a>
 </div>
 <div class="block-image">
  <img alt="Forest wedding photos" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
  <span class="image-badge">
   400 Acres
  </span>
 </div>
</div>
CSS
.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.block-item:last-child {
            margin-bottom: 0;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }

Sliders - Team Carousel

SLIDERS html> comp-104

A sliders component containing images. Contains 24 child elements.

Venue Tabs

TABS html> comp-105

A tabs component containing buttons. Contains 4 child elements.

...
HTML
<div class="venue-tabs">
 <button class="venue-tab active">
  The Barn
 </button>
 <button class="venue-tab">
  Bridal Suite
 </button>
 <button class="venue-tab">
  Groom's Quarters
 </button>
 <button class="venue-tab">
  Garden Pavilion
 </button>
</div>
CSS
.venue-tabs {
                flex-direction: column;
                align-items: center;
            }
.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.venue-tab {
            padding: 15px 35px;
            background: transparent;
            border: 2px solid var(--accent-gold);
            color: var(--accent-gold);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.venue-tab.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.venue-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }

Buttons - Btn Group

BUTTONS html> comp-113

A buttons component containing buttons, links. Contains 2 child elements.

HTML
<div class="btn-group">
 <a class="btn-outline" href="#">
  View Gallery
 </a>
 <a class="btn-outline" href="#">
  Check Availability
 </a>
</div>
CSS
.btn-outline-light {
            border-color: white;
            color: white;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.btn-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Teams - Team Member

TEAMS html> comp-117

A teams component containing images. Contains 5 child elements.

John

John & Mary Thompson

Owners

Fourth-generation farmers who transformed their family property into Minnesota's most sought-after wedding venue.

...
HTML
<div class="team-member">
 <div class="member-image">
  <img alt="John" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400"/>
 </div>
 <h3 class="member-name">
  John & Mary Thompson
 </h3>
 <p class="member-role">
  Owners
 </p>
 <p class="member-bio">
  Fourth-generation farmers who transformed their family property into Minnesota's most sought-after wedding venue.
 </p>
</div>
CSS
.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Teams - Team Member

TEAMS html> comp-118

A teams component containing images. Contains 5 child elements.

Sarah

Sarah Mitchell

Event Coordinator

With 15 years of experience, Sarah ensures every detail of your special day runs flawlessly.

...
HTML
<div class="team-member">
 <div class="member-image">
  <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400"/>
 </div>
 <h3 class="member-name">
  Sarah Mitchell
 </h3>
 <p class="member-role">
  Event Coordinator
 </p>
 <p class="member-bio">
  With 15 years of experience, Sarah ensures every detail of your special day runs flawlessly.
 </p>
</div>
CSS
.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Teams - Team Member

TEAMS html> comp-119

A teams component containing images. Contains 5 child elements.

Michael

Michael Rivers

Grounds Manager

Maintains our 400 acres to perfection, creating stunning backdrops for your celebration.

...
HTML
<div class="team-member">
 <div class="member-image">
  <img alt="Michael" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400"/>
 </div>
 <h3 class="member-name">
  Michael Rivers
 </h3>
 <p class="member-role">
  Grounds Manager
 </p>
 <p class="member-bio">
  Maintains our 400 acres to perfection, creating stunning backdrops for your celebration.
 </p>
</div>
CSS
.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Teams - Team Member

TEAMS html> comp-120

A teams component containing images. Contains 5 child elements.

Emily

Emily Chen

Guest Relations

Your first point of contact, Emily helps couples envision and plan their perfect day.

...
HTML
<div class="team-member">
 <div class="member-image">
  <img alt="Emily" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"/>
 </div>
 <h3 class="member-name">
  Emily Chen
 </h3>
 <p class="member-role">
  Guest Relations
 </p>
 <p class="member-bio">
  Your first point of contact, Emily helps couples envision and plan their perfect day.
 </p>
</div>
CSS
.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Maps - Map Container

MAPS html> comp-126

A maps component. Contains 32 child elements.

Find Your Way to Forever

📍

Address

12500 Rum River Drive
Princeton, MN 55371

🚗
...
HTML
<div class="map-container">
 <div class="map-info">
  <h2>
   Find Your Way to Forever
  </h2>
  <div class="location-details">
   <div class="location-item">
    <div class="location-icon">
     📍
    </div>
    <div class="location-text">
     <h4>
      Address
     </h4>
     <p>
      12500 Rum River Drive
      <br/>
      Princeton, MN 55371
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     🚗
    </div>
    <div class="location-text">
     <h4>
      Easy Access From
     </h4>
     <p>
      45 min from Minneapolis
      <br/>
      30 min from St. Cloud
      <br/>
      1 hour from Brainerd
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     ✈️
    </div>
    <div class="location-text">
     <h4>
      Nearest Airport
     </h4>
     <p>
      Minneapolis-St. Paul International
      <br/>
      55 miles (1 hour drive)
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     🏨
    </div>
    <div class="location-text">
     <h4>
      Accommodations
     </h4>
     <p>
      Partner hotels in Princeton & Milaca
      <br/>
      Group rates available
     </p>
    </div>
   </div>
  </div>
 </div>
 <div class="map-embed">
  <div class="map-placeholder">
   <p>
    Interactive Map
   </p>
   <p style="font-size: 16px; margin-top: 10px;">
    Click to view on Google Maps
   </p>
  </div>
 </div>
</div>
CSS
.location-details {
            margin-bottom: 40px;
        }
.map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.map-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 600px;
        }
.map-info {
                padding: 40px 20px;
            }
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.map-info {
            padding: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.map-embed {
            background: var(--deep-brown);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            position: relative;
            overflow: hidden;
        }
.map-info h2 {
            font-size: 42px;
            color: var(--deep-brown);
            margin-bottom: 30px;
        }
.map-placeholder {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.map-embed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
        }

Maps - Map Info

MAPS html> comp-127

A maps component. Contains 27 child elements.

Find Your Way to Forever

📍

Address

12500 Rum River Drive
Princeton, MN 55371

🚗

Easy Access From

45 m...

HTML
<div class="map-info">
 <h2>
  Find Your Way to Forever
 </h2>
 <div class="location-details">
  <div class="location-item">
   <div class="location-icon">
    📍
   </div>
   <div class="location-text">
    <h4>
     Address
    </h4>
    <p>
     12500 Rum River Drive
     <br/>
     Princeton, MN 55371
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    🚗
   </div>
   <div class="location-text">
    <h4>
     Easy Access From
    </h4>
    <p>
     45 min from Minneapolis
     <br/>
     30 min from St. Cloud
     <br/>
     1 hour from Brainerd
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    ✈️
   </div>
   <div class="location-text">
    <h4>
     Nearest Airport
    </h4>
    <p>
     Minneapolis-St. Paul International
     <br/>
     55 miles (1 hour drive)
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    🏨
   </div>
   <div class="location-text">
    <h4>
     Accommodations
    </h4>
    <p>
     Partner hotels in Princeton & Milaca
     <br/>
     Group rates available
    </p>
   </div>
  </div>
 </div>
</div>
CSS
.location-details {
            margin-bottom: 40px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.map-info {
                padding: 40px 20px;
            }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.map-info {
            padding: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.map-info h2 {
            font-size: 42px;
            color: var(--deep-brown);
            margin-bottom: 30px;
        }

Maps - Map Embed

MAPS html> comp-128

A maps component. Contains 3 child elements.

Interactive Map

Click to view on Google Maps

...
HTML
<div class="map-embed">
 <div class="map-placeholder">
  <p>
   Interactive Map
  </p>
  <p style="font-size: 16px; margin-top: 10px;">
   Click to view on Google Maps
  </p>
 </div>
</div>
CSS
.map-placeholder {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.map-embed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
        }
.map-embed {
            background: var(--deep-brown);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            position: relative;
            overflow: hidden;
        }

Maps - Map Placeholder

MAPS html> comp-129

A maps component. Contains 2 child elements.

Interactive Map

Click to view on Google Maps

...
HTML
<div class="map-placeholder">
 <p>
  Interactive Map
 </p>
 <p style="font-size: 16px; margin-top: 10px;">
  Click to view on Google Maps
 </p>
</div>
CSS
.map-placeholder {
            position: relative;
            z-index: 1;
            text-align: center;
        }

Maps - Location Details

MAPS html> comp-130

A maps component. Contains 25 child elements.

📍

Address

12500 Rum River Drive
Princeton, MN 55371

🚗

Easy Access From

45 min from Minneapolis
30 min from St. Cloud
1 hour from Brainer...

HTML
<div class="location-details">
 <div class="location-item">
  <div class="location-icon">
   📍
  </div>
  <div class="location-text">
   <h4>
    Address
   </h4>
   <p>
    12500 Rum River Drive
    <br/>
    Princeton, MN 55371
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   🚗
  </div>
  <div class="location-text">
   <h4>
    Easy Access From
   </h4>
   <p>
    45 min from Minneapolis
    <br/>
    30 min from St. Cloud
    <br/>
    1 hour from Brainerd
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   ✈️
  </div>
  <div class="location-text">
   <h4>
    Nearest Airport
   </h4>
   <p>
    Minneapolis-St. Paul International
    <br/>
    55 miles (1 hour drive)
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   🏨
  </div>
  <div class="location-text">
   <h4>
    Accommodations
   </h4>
   <p>
    Partner hotels in Princeton & Milaca
    <br/>
    Group rates available
   </p>
  </div>
 </div>
</div>
CSS
.location-details {
            margin-bottom: 40px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }

Maps - Location Item

MAPS html> comp-131

A maps component. Contains 5 child elements.

📍

Address

12500 Rum River Drive
Princeton, MN 55371

...
HTML
<div class="location-item">
 <div class="location-icon">
  📍
 </div>
 <div class="location-text">
  <h4>
   Address
  </h4>
  <p>
   12500 Rum River Drive
   <br/>
   Princeton, MN 55371
  </p>
 </div>
</div>
CSS
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }

Maps - Location Text

MAPS html> comp-132

A maps component. Contains 3 child elements.

Address

12500 Rum River Drive
Princeton, MN 55371

...
HTML
<div class="location-text">
 <h4>
  Address
 </h4>
 <p>
  12500 Rum River Drive
  <br/>
  Princeton, MN 55371
 </p>
</div>
CSS
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }

Maps - Location Item

MAPS html> comp-133

A maps component. Contains 6 child elements.

🚗

Easy Access From

45 min from Minneapolis
30 min from St. Cloud
1 hour from Brainerd

...
HTML
<div class="location-item">
 <div class="location-icon">
  🚗
 </div>
 <div class="location-text">
  <h4>
   Easy Access From
  </h4>
  <p>
   45 min from Minneapolis
   <br/>
   30 min from St. Cloud
   <br/>
   1 hour from Brainerd
  </p>
 </div>
</div>
CSS
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }

Maps - Location Text

MAPS html> comp-134

A maps component. Contains 4 child elements.

Easy Access From

45 min from Minneapolis
30 min from St. Cloud
1 hour from Brainerd

...
HTML
<div class="location-text">
 <h4>
  Easy Access From
 </h4>
 <p>
  45 min from Minneapolis
  <br/>
  30 min from St. Cloud
  <br/>
  1 hour from Brainerd
 </p>
</div>
CSS
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }

Maps - Location Item

MAPS html> comp-135

A maps component. Contains 5 child elements.

✈️

Nearest Airport

Minneapolis-St. Paul International
55 miles (1 hour drive)

...
HTML
<div class="location-item">
 <div class="location-icon">
  ✈️
 </div>
 <div class="location-text">
  <h4>
   Nearest Airport
  </h4>
  <p>
   Minneapolis-St. Paul International
   <br/>
   55 miles (1 hour drive)
  </p>
 </div>
</div>
CSS
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }

Maps - Location Text

MAPS html> comp-136

A maps component. Contains 3 child elements.

Nearest Airport

Minneapolis-St. Paul International
55 miles (1 hour drive)

...
HTML
<div class="location-text">
 <h4>
  Nearest Airport
 </h4>
 <p>
  Minneapolis-St. Paul International
  <br/>
  55 miles (1 hour drive)
 </p>
</div>
CSS
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }

Maps - Location Item

MAPS html> comp-137

A maps component. Contains 5 child elements.

🏨

Accommodations

Partner hotels in Princeton & Milaca
Group rates available

...
HTML
<div class="location-item">
 <div class="location-icon">
  🏨
 </div>
 <div class="location-text">
  <h4>
   Accommodations
  </h4>
  <p>
   Partner hotels in Princeton & Milaca
   <br/>
   Group rates available
  </p>
 </div>
</div>
CSS
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }

Maps - Location Text

MAPS html> comp-138

A maps component. Contains 3 child elements.

Accommodations

Partner hotels in Princeton & Milaca
Group rates available

...
HTML
<div class="location-text">
 <h4>
  Accommodations
 </h4>
 <p>
  Partner hotels in Princeton & Milaca
  <br/>
  Group rates available
 </p>
</div>
CSS
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }

Social Logos

SOCIAL html> comp-141

A social component. Contains 4 child elements.

...
HTML
<div class="social-logos">
 <span class="social-logo">
  The Knot
 </span>
 <span class="social-logo">
  WeddingWire
 </span>
 <span class="social-logo">
  Martha Stewart
 </span>
 <span class="social-logo">
  Minnesota Bride
 </span>
</div>
CSS
.social-logo {
            color: white;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
.social-logos {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-bottom: 40px;
            flex-wrap: wrap;
            opacity: 0.6;
        }

Social Text

SOCIAL html> comp-142

A social component. Contains 2 child elements.

...
HTML
<p class="social-text">
 "Rum River Barn isn't just a venue—it's
 <span class="highlight">
  where dreams come to life
 </span>
 . 
                Their commitment to saying 'yes' to every couple's vision sets them apart as
 <span class="highlight">
  Minnesota's most accommodating wedding destination
 </span>
 ."
</p>
CSS
.highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.social-text .highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.social-text {
            font-size: 32px;
            color: white;
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.4;
        }

Blogs - Blog Meta

BLOGS html> comp-150

A blogs component. Contains 2 child elements.

October 15, 2024 5 min read
...
HTML
<div class="blog-meta">
 <span>
  October 15, 2024
 </span>
 <span>
  5 min read
 </span>
</div>
CSS
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }

Blogs - Blog Meta

BLOGS html> comp-153

A blogs component. Contains 2 child elements.

October 10, 2024 3 min read
...
HTML
<div class="blog-meta">
 <span>
  October 10, 2024
 </span>
 <span>
  3 min read
 </span>
</div>
CSS
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }

Blogs - Blog Meta

BLOGS html> comp-156

A blogs component. Contains 2 child elements.

October 5, 2024 4 min read
...
HTML
<div class="blog-meta">
 <span>
  October 5, 2024
 </span>
 <span>
  4 min read
 </span>
</div>
CSS
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }

Heroes - Offset Hero

HEROES html> comp-167

A heroes component containing images, buttons, links. Contains 20 child elements.

Minnesota's Premier Venue

Where Rustic Charm Meets Modern Elegance

Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.

HTML
<section class="offset-hero">
 <div class="container">
  <div class="offset-hero-content">
   <div class="offset-text">
    <span class="badge">
     Minnesota's Premier Venue
    </span>
    <h2>
     Where Rustic Charm Meets Modern Elegance
    </h2>
    <p>
     Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.
    </p>
    <div class="btn-group">
     <a class="btn-outline" href="#">
      View Gallery
     </a>
     <a class="btn-outline" href="#">
      Check Availability
     </a>
    </div>
   </div>
   <div class="offset-images">
    <div class="offset-main-img">
     <img alt="Wedding ceremony" src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800"/>
    </div>
    <div class="offset-accent-img">
     <img alt="Wedding details" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
    </div>
    <div class="floating-card">
     <h4>
      2025 Dates
     </h4>
     <p>
      Limited availability for peak season
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Subtle Wave Divider Bottom -->
 <div class="shape-divider bottom subtle-wave">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,0V40c240,20,480,20,720,0s480-20,480,0v80H0Z" fill="#2C2416">
   </path>
  </svg>
 </div>
</section>
CSS
.shape-divider.split svg {
                height: 40px;
            }
.offset-main-img {
            position: absolute;
            top: 0;
            right: 0;
            width: 85%;
            height: 85%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.15);
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.offset-hero {
            padding: 120px 0 140px;
            background: linear-gradient(135deg, var(--soft-white) 0%, var(--warm-cream) 100%);
            position: relative;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.shape-divider { 
            display: none !important; 
        }
.offset-hero-content,
            .block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.offset-accent-img {
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 45%;
            height: 45%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border: 8px solid var(--soft-white);
        }
.offset-text p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 40px;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.offset-hero-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px;
            align-items: center;
            position: relative;
        }
.offset-accent-img {
                display: none;
            }
.offset-accent-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.btn-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
.offset-main-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.offset-images {
                height: 400px;
                margin-top: 40px;
            }
.offset-text {
            z-index: 2;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.floating-card {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            max-width: 200px;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.floating-card h4 {
            color: var(--deep-brown);
            font-size: 20px;
            margin-bottom: 8px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.offset-text .badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.floating-card p {
            color: var(--text-light);
            font-size: 14px;
        }
.shape-divider svg {
                height: 20px;
            }
.offset-images {
            position: relative;
            height: 600px;
        }
.offset-text h2 {
            font-size: 54px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }

Heroes - Venue Showcase Section Shape Top Shape So

HEROES html> comp-169

A heroes component containing images, buttons. Contains 31 child elements.

Explore Our Spaces

Every corner tells a story, every space creates memories

<section class="venue-showcase section-shape-top shape--soft-curve">
 <div class="container venue-content">
  <div class="venue-header">
   <h2>
    Explore Our Spaces
   </h2>
   <p>
    Every corner tells a story, every space creates memories
   </p>
  </div>
  <div class="venue-tabs">
   <button class="venue-tab active">
    The Barn
   </button>
   <button class="venue-tab">
    Bridal Suite
   </button>
   <button class="venue-tab">
    Groom's Quarters
   </button>
   <button class="venue-tab">
    Garden Pavilion
   </button>
  </div>
  <div class="venue-display">
   <div class="venue-main-image">
    <img alt="Barn interior" src="https://images.unsplash.com/photo-1564069114553-7215e1ff1890?w=800"/>
   </div>
   <div class="venue-details">
    <h3>
     The Historic Barn
    </h3>
    <p>
     Our crown jewel, this beautifully restored barn features soaring ceilings, original timber beams, and modern amenities seamlessly integrated into its historic charm.
    </p>
    <div class="venue-features">
     <div class="venue-feature">
      <h5>
       Capacity
      </h5>
      <p>
       Up to 300 guests
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Features
      </h5>
      <p>
       Built-in bar & dance floor
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Lighting
      </h5>
      <p>
       Edison bulbs & chandeliers
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Climate
      </h5>
      <p>
       Heated & air conditioned
      </p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <!-- Split Divider Bottom -->
 <div class="shape-divider bottom split">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,0 L0,40 L600,70 L1200,40 L1200,0 L1200,120 L0,120 Z" fill="#FEFDFB">
   </path>
  </svg>
 </div>
</section>
CSS
.shape-divider.split svg {
                height: 40px;
            }
.venue-tabs {
                flex-direction: column;
                align-items: center;
            }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-tab {
            padding: 15px 35px;
            background: transparent;
            border: 2px solid var(--accent-gold);
            color: var(--accent-gold);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.venue-showcase::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(212, 165, 116, 0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
        }
.venue-display {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 60px;
            align-items: center;
        }
.venue-header {
            text-align: center;
            margin-bottom: 80px;
        }
.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.container {
                padding: 0 20px;
            }
.shape-divider { 
            display: none !important; 
        }
.venue-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.venue-tab.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.venue-main-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.shape--soft-curve { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,60 Q600,0 1200,60 L1200,120 L0,120 Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.venue-showcase {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--deep-brown) 0%, var(--dark-bg) 100%);
            position: relative;
            overflow: hidden;
        }
.venue-content {
            position: relative;
            z-index: 1;
        }
.section-shape-top { 
            position: relative; 
        }
.split svg {
                height: 40px;
            }
.venue-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.venue-header p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
        }
.venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.venue-details p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
        }
.venue-details {
            color: white;
        }
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.shape-divider svg {
                height: 20px;
            }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }
.venue-main-image {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.3);
        }
.venue-details h3 {
            font-size: 36px;
            margin-bottom: 25px;
            color: var(--accent-gold);
        }

Galleries - Instagram Section Section Shape Top Sh

GALLERIES html> comp-173

A galleries component containing images, links. Contains 44 child elements.

Follow Our Journey

@rumriverbarn
HTML
<section class="instagram-section section-shape-top shape--angle">
 <!-- Simple Angle Top -->
 <div class="shape-divider top angle">
  <svg preserveaspectratio="none" style="transform: rotate(180deg)" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 0L1200 120h-1200z" fill="#FAF6F2">
   </path>
  </svg>
 </div>
 <div class="container">
  <div class="instagram-header">
   <h2>
    Follow Our Journey
   </h2>
   <a class="instagram-handle" href="#">
    @rumriverbarn
   </a>
  </div>
  <div class="instagram-grid">
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       1,247
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       892
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       2,103
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       1,567
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       934
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       3,421
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>
CSS
.shape-divider.split svg {
                height: 40px;
            }
.instagram-handle {
            color: var(--accent-gold);
            font-size: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
.instagram-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.instagram-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(44, 36, 22, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
.instagram-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
.instagram-post:hover .instagram-overlay {
            opacity: 1;
        }
.instagram-stats span {
            display: block;
            margin: 10px;
            font-size: 16px;
        }
.instagram-stats {
            text-align: center;
            color: white;
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.container {
                padding: 0 20px;
            }
.instagram-overlay {
            opacity: 1;
        }
.instagram-header {
            text-align: center;
            margin-bottom: 60px;
        }
.shape-divider { 
            display: none !important; 
        }
.count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.instagram-post:hover img {
            transform: scale(1.1);
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.instagram-grid {
                grid-template-columns: 1fr;
            }
.instagram-post img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.section-shape-top { 
            position: relative; 
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.instagram-post {
            position: relative;
            padding-bottom: 100%;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
        }
.instagram-section {
            padding: 120px 0;
            background: var(--warm-cream);
            position: relative;
        }
.instagram-handle:hover {
            color: var(--primary-brown);
        }
.shape-divider svg {
                height: 20px;
            }
.instagram-stats .count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Cards - Services Reveal Section Shape Top Shape An

CARDS html> comp-187

A cards component containing images. Contains 26 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations, we're here for all of life's milestones

Wedding
HTML
<section class="services-reveal section-shape-top shape--angle">
 <div class="container">
  <div class="services-header">
   <h2>
    Celebrate Every Moment
   </h2>
   <p class="subtitle">
    From intimate gatherings to grand celebrations, we're here for all of life's milestones
   </p>
  </div>
  <div class="services-cards">
   <div class="service-card">
    <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $5,000
     </span>
     <h3 class="service-title">
      Weddings
     </h3>
     <p class="service-description">
      Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Corporate Event" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $2,000
     </span>
     <h3 class="service-title">
      Corporate Events
     </h3>
     <p class="service-description">
      Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Special Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $1,500
     </span>
     <h3 class="service-title">
      Celebrations
     </h3>
     <p class="service-description">
      Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Soft Curve Divider Bottom -->
 <div class="shape-divider bottom soft-curve">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,60 Q600,0 1200,60 L1200,120 L0,120 Z" fill="#4A3426">
   </path>
  </svg>
 </div>
</section>
CSS
.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.shape-divider.split svg {
                height: 40px;
            }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.services-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            position: relative;
            z-index: 1;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.soft-curve svg {
                height: 30px;
            }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.services-header .subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.service-title {
            transform: translateY(-10px);
        }
.service-bg {
            transform: scale(1.1);
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.container {
                padding: 0 20px;
            }
.subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.shape-divider { 
            display: none !important; 
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.section-shape-top { 
            position: relative; 
        }
.services-reveal {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--warm-cream) 0%, white 100%);
            position: relative;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.services-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 1;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.services-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.shape-divider svg {
                height: 20px;
            }
.services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.services-reveal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="rgba(139, 99, 55, 0.05)"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>');
            opacity: 0.5;
        }

Sections - Alternating Blocks Section Shape Top Sh

SECTIONS html> comp-211

A sections component containing images, buttons, links. Contains 46 child elements.

01

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.

  • Climate-...
HTML
<section class="alternating-blocks section-shape-top shape--subtle-wave">
 <div class="container">
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     01
    </div>
    <h3>
     The Historic Barn
    </h3>
    <p>
     Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.
    </p>
    <ul class="feature-list">
     <li>
      Climate-controlled comfort year-round
     </li>
     <li>
      Original exposed beam architecture
     </li>
     <li>
      Capacity for up to 300 guests
     </li>
     <li>
      State-of-the-art lighting system
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Explore The Barn
    </a>
   </div>
   <div class="block-image">
    <img alt="Historic barn interior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=800"/>
    <span class="image-badge">
     100+ Years
    </span>
   </div>
  </div>
  <div class="block-item reverse">
   <div class="block-content">
    <div class="number">
     02
    </div>
    <h3>
     Vineyard Ceremonies
    </h3>
    <p>
     Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.
    </p>
    <ul class="feature-list">
     <li>
      Sunset ceremony perfection
     </li>
     <li>
      Natural amphitheater setting
     </li>
     <li>
      Rain backup in covered pavilion
     </li>
     <li>
      Complimentary wine tasting for couples
     </li>
    </ul>
    <a class="btn-outline" href="#">
     View Ceremony Sites
    </a>
   </div>
   <div class="block-image">
    <img alt="Vineyard ceremony site" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=800"/>
    <span class="image-badge">
     5 Locations
    </span>
   </div>
  </div>
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     03
    </div>
    <h3>
     Enchanted Forest
    </h3>
    <p>
     Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.
    </p>
    <ul class="feature-list">
     <li>
      Professional trail lighting available
     </li>
     <li>
      Hidden clearings for portraits
     </li>
     <li>
      Seasonal wildflower meadows
     </li>
     <li>
      Private couple's photography hour
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Discover The Grounds
    </a>
   </div>
   <div class="block-image">
    <img alt="Forest wedding photos" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
    <span class="image-badge">
     400 Acres
    </span>
   </div>
  </div>
 </div>
 <!-- Angle Divider Bottom -->
 <div class="shape-divider bottom angle">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M1200 0L0 120h1200z" fill="#FAF6F2">
   </path>
  </svg>
 </div>
</section>
CSS
.shape-divider.split svg {
                height: 40px;
            }
.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.block-item:last-child {
            margin-bottom: 0;
        }
.alternating-blocks .btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.alternating-blocks p,
        .alternating-blocks .feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.reverse {
            direction: rtl;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.reverse {
                direction: ltr;
            }
.shape-divider { 
            display: none !important; 
        }
.reverse .block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.section-shape-top { 
            position: relative; 
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.alternating-blocks .btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.alternating-blocks {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-bg) 0%, var(--medium-bg) 100%);
            position: relative;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.shape--subtle-wave { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V40c240,20,480,20,720,0s480-20,480,0v80H0Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.shape-divider svg {
                height: 20px;
            }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.alternating-blocks h3,
        .alternating-blocks .number {
            color: white;
        }

Sections - Team Section Section Shape Top Shape Su

SECTIONS html> comp-215

A sections component containing images. Contains 32 child elements.

Meet Your Hosts

The Family Behind the Farm

Sections - Blog Section Section Shape Top Shape An

SECTIONS html> comp-216

A sections component containing images, buttons, links. Contains 43 child elements.

Stories from the Barn

Wedding inspiration, planning tips, and real celebrations

View All Posts
Fall wedding
HTML
<section class="blog-section section-shape-top shape--angle">
 <div class="container">
  <div class="blog-header">
   <div class="blog-header-text">
    <h2>
     Stories from the Barn
    </h2>
    <p>
     Wedding inspiration, planning tips, and real celebrations
    </p>
   </div>
   <a class="btn-outline" href="#">
    View All Posts
   </a>
  </div>
  <div class="blog-grid">
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
     <span class="blog-category">
      Real Weddings
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 15, 2024
      </span>
      <span>
       5 min read
      </span>
     </div>
     <h3 class="blog-title">
      A Magical Fall Wedding: Sarah & Tom's Story
     </h3>
     <p class="blog-excerpt">
      When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
     </p>
     <a class="read-more" href="#">
      Read Story
     </a>
    </div>
   </article>
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Wedding planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
     <span class="blog-category">
      Planning Tips
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 10, 2024
      </span>
      <span>
       3 min read
      </span>
     </div>
     <h3 class="blog-title">
      10 Ways to Personalize Your Barn Wedding
     </h3>
     <p class="blog-excerpt">
      From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
     </p>
     <a class="read-more" href="#">
      Read More
     </a>
    </div>
   </article>
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Seasonal guide" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600"/>
     <span class="blog-category">
      Seasonal Guide
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 5, 2024
      </span>
      <span>
       4 min read
      </span>
     </div>
     <h3 class="blog-title">
      Why Minnesota Summers Make Perfect Weddings
     </h3>
     <p class="blog-excerpt">
      Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
     </p>
     <a class="read-more" href="#">
      Read Guide
     </a>
    </div>
   </article>
  </div>
 </div>
 <!-- Soft Curve Bottom to Sage -->
 <div class="shape-divider bottom soft-curve">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,40 Q600,80 1200,40 L1200,120 L0,120 Z" fill="#7A8B7F">
   </path>
  </svg>
 </div>
</section>
CSS
.shape-divider.split svg {
                height: 40px;
            }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.soft-curve svg {
                height: 30px;
            }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.blog-header-text p {
            color: var(--text-light);
            font-size: 18px;
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.blog-content {
            padding: 35px;
        }
.container {
                padding: 0 20px;
            }
.blog-image img {
            transform: scale(1.1);
        }
.shape-divider { 
            display: none !important; 
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            flex-wrap: wrap;
            gap: 30px;
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.blog-section {
            padding: 120px 0;
            background: white;
            position: relative;
        }
.blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
.section-shape-top { 
            position: relative; 
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-header-text h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 10px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.shape-divider svg {
                height: 20px;
            }
.blog-header {
                flex-direction: column;
                align-items: flex-start;
            }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }

Headers - Nav Container

HEADERS html> comp-313

A headers component containing links. Contains 12 child elements.

HTML
<div class="nav-container">
 <div class="logo">
  RUM RIVER
 </div>
 <ul class="nav-links">
  <li>
   <a href="#home">
    Home
   </a>
  </li>
  <li>
   <a href="#about">
    About
   </a>
  </li>
  <li>
   <a href="#features">
    Amenities
   </a>
  </li>
  <li>
   <a href="#gallery">
    Gallery
   </a>
  </li>
  <li>
   <a href="#contact">
    Contact
   </a>
  </li>
 </ul>
</div>
CSS
.logo {
            font-size: 28px;
            color: var(--light);
            font-weight: bold;
            letter-spacing: 2px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: fadeIn 1s ease;
        }
.nav-links a {
            color: var(--light);
            text-decoration: none;
            font-size: 16px;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
        }
.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }
.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
.nav-links a:hover::after {
            width: 100%;
        }
.nav-links { display: none; }
.nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }

Headers - Nav Links

HEADERS html> comp-314

A headers component containing links. Contains 10 child elements.

HTML
<ul class="nav-links">
 <li>
  <a href="#home">
   Home
  </a>
 </li>
 <li>
  <a href="#about">
   About
  </a>
 </li>
 <li>
  <a href="#features">
   Amenities
  </a>
 </li>
 <li>
  <a href="#gallery">
   Gallery
  </a>
 </li>
 <li>
  <a href="#contact">
   Contact
  </a>
 </li>
</ul>
CSS
.nav-links a {
            color: var(--light);
            text-decoration: none;
            font-size: 16px;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
        }
.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
.nav-links { display: none; }
.nav-links a:hover::after {
            width: 100%;
        }
.nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }

Headers - Navbar

HEADERS html> comp-315

A headers component containing links. Contains 13 child elements.

HTML
<nav id="navbar">
 <div class="nav-container">
  <div class="logo">
   RUM RIVER
  </div>
  <ul class="nav-links">
   <li>
    <a href="#home">
     Home
    </a>
   </li>
   <li>
    <a href="#about">
     About
    </a>
   </li>
   <li>
    <a href="#features">
     Amenities
    </a>
   </li>
   <li>
    <a href="#gallery">
     Gallery
    </a>
   </li>
   <li>
    <a href="#contact">
     Contact
    </a>
   </li>
  </ul>
 </div>
</nav>
CSS
.logo {
            font-size: 28px;
            color: var(--light);
            font-weight: bold;
            letter-spacing: 2px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: fadeIn 1s ease;
        }
.nav-links a {
            color: var(--light);
            text-decoration: none;
            font-size: 16px;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
        }
.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }
.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
.nav-links a:hover::after {
            width: 100%;
        }
.nav-links { display: none; }
.nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }
JavaScript
        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // Observe elements
        document.querySelectorAll('.feature-card, .gallery-item').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'all 0.6s ease';
            observer.observe(el);
        });

        // Parallax effect
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const hero = document.querySelector('.hero::before');
            if (hero) {
                document.querySelector('.hero').style.transform = `translateY(${scrolled * 0.5}px)`;
            }
        });
    

Heroes - Home

HEROES html> comp-318

A heroes component containing links. Contains 6 child elements.

WELCOME TO

Rum River
Barn & Vineyard

Where Rustic Charm Meets Timeless Romance

START YOUR JOURNEY
...
HTML
<section class="hero" id="home">
 <div class="hero-content">
  <div class="hero-subtitle">
   WELCOME TO
  </div>
  <h1 class="hero-title">
   Rum River
   <br/>
   Barn & Vineyard
  </h1>
  <p class="hero-description">
   Where Rustic Charm Meets Timeless Romance
  </p>
  <a class="cta-button" href="#contact">
   START YOUR JOURNEY
  </a>
 </div>
</section>
CSS
.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(212,165,116,0.4);
        }
.hero-content::after {
            content: '';
            position: absolute;
            top: -40px;
            left: -40px;
            right: -40px;
            bottom: -40px;
            border: 1px solid rgba(212, 165, 116, 0.1);
            border-radius: 30px;
            animation: pulse 4s ease-in-out infinite 0.5s;
        }
.hero-title {
            font-size: 72px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
            letter-spacing: 3px;
            animation: slideUp 1.5s ease 0.3s both;
        }
.hero-subtitle {
            font-size: 18px;
            letter-spacing: 4px;
            margin-bottom: 20px;
            opacity: 0.9;
            animation: fadeIn 2s ease 0.5s both;
        }
.cta-button {
            display: inline-block;
            padding: 18px 45px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            color: var(--light);
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 50px;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            animation: pulse 2s infinite;
        }
.hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1410;
            overflow: hidden;
        }
.hero-content {
            text-align: center;
            color: var(--light);
            z-index: 10;
            position: relative;
            animation: slideUp 1.5s ease;
            padding: 40px;
            background: radial-gradient(circle at center, rgba(44, 24, 16, 0.4) 0%, transparent 70%);
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }
.hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><pattern id="vines" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><path d="M50,0 Q100,50 50,100 T50,200" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><circle cx="50" cy="50" r="3" fill="%23D4A574" opacity="0.3"/><circle cx="50" cy="150" r="3" fill="%23D4A574" opacity="0.3"/></pattern></defs><rect width="1920" height="1080" fill="url(%23vines)"/><path d="M0,800 Q480,700 960,800 T1920,800 L1920,1080 L0,1080 Z" fill="%232C1810" opacity="0.5"/></svg>');
            background-size: cover;
            animation: float 15s ease-in-out infinite;
        }
.hero-content::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border: 2px solid rgba(212, 165, 116, 0.3);
            border-radius: 25px;
            animation: pulse 4s ease-in-out infinite;
        }
.hero-title { font-size: 48px; }
.hero-description {
            font-size: 24px;
            font-style: italic;
            margin-bottom: 40px;
            opacity: 0.95;
            animation: fadeIn 2s ease 0.8s both;
        }
.hero-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
        }
.hero-image-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #2C1810 0%, #8B7355 50%, #D4A574 100%);
            opacity: 0.6;
            animation: slowZoom 20s ease-in-out infinite alternate;
        }

Heroes - Hero Content

HEROES html> comp-319

A heroes component containing links. Contains 5 child elements.

WELCOME TO

Rum River
Barn & Vineyard

Where Rustic Charm Meets Timeless Romance

START YOUR JOURNEY
...
HTML
<div class="hero-content">
 <div class="hero-subtitle">
  WELCOME TO
 </div>
 <h1 class="hero-title">
  Rum River
  <br/>
  Barn & Vineyard
 </h1>
 <p class="hero-description">
  Where Rustic Charm Meets Timeless Romance
 </p>
 <a class="cta-button" href="#contact">
  START YOUR JOURNEY
 </a>
</div>
CSS
.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(212,165,116,0.4);
        }
.hero-content::after {
            content: '';
            position: absolute;
            top: -40px;
            left: -40px;
            right: -40px;
            bottom: -40px;
            border: 1px solid rgba(212, 165, 116, 0.1);
            border-radius: 30px;
            animation: pulse 4s ease-in-out infinite 0.5s;
        }
.hero-title {
            font-size: 72px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
            letter-spacing: 3px;
            animation: slideUp 1.5s ease 0.3s both;
        }
.hero-subtitle {
            font-size: 18px;
            letter-spacing: 4px;
            margin-bottom: 20px;
            opacity: 0.9;
            animation: fadeIn 2s ease 0.5s both;
        }
.cta-button {
            display: inline-block;
            padding: 18px 45px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            color: var(--light);
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 50px;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            animation: pulse 2s infinite;
        }
.hero-content {
            text-align: center;
            color: var(--light);
            z-index: 10;
            position: relative;
            animation: slideUp 1.5s ease;
            padding: 40px;
            background: radial-gradient(circle at center, rgba(44, 24, 16, 0.4) 0%, transparent 70%);
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }
.hero-content::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border: 2px solid rgba(212, 165, 116, 0.3);
            border-radius: 25px;
            animation: pulse 4s ease-in-out infinite;
        }
.hero-title { font-size: 48px; }
.hero-description {
            font-size: 24px;
            font-style: italic;
            margin-bottom: 40px;
            opacity: 0.95;
            animation: fadeIn 2s ease 0.8s both;
        }

Galleries - About Grid

GALLERIES html> comp-320

A galleries component. Contains 9 child elements.

Your Perfect Day
Awaits

Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.

With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.

...

HTML
<div class="about-grid">
 <div class="about-content">
  <h2>
   Your
   <span class="accent-text">
    Perfect Day
   </span>
   <br/>
   Awaits
  </h2>
  <p>
   Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.
  </p>
  <p>
   With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.
  </p>
  <p>
   Every wedding here tells a unique story, and we're honored to be part of yours.
  </p>
 </div>
 <div class="about-image">
  <div class="image-placeholder">
  </div>
 </div>
</div>
CSS
.about-content h2 {
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
            animation: slideInLeft 1s ease;
        }
.image-placeholder:hover {
            transform: scale(1.05) rotate(1deg);
        }
.image-placeholder::after {
            content: 'Rustic Barn Interior';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(255,255,255,0.7);
            font-size: 24px;
            letter-spacing: 3px;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
.about-grid, .features-grid { grid-template-columns: 1fr; }
.about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease 0.3s both;
        }
.image-placeholder {
            width: 100%;
            height: 500px;
            background: linear-gradient(135deg, var(--sage) 0%, var(--primary) 100%);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            transition: transform 0.5s ease;
        }
.about-image {
            position: relative;
            animation: slideInRight 1s ease;
        }

Galleries - Features Grid

GALLERIES html> comp-321

A galleries component. Contains 24 child elements.

🏛️

Historic Barn

Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.

🍇

Vineyard Views

Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.

...
HTML
<div class="features-grid">
 <div class="feature-card">
  <div class="feature-icon">
   🏛️
  </div>
  <h3>
   Historic Barn
  </h3>
  <p>
   Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🍇
  </div>
  <h3>
   Vineyard Views
  </h3>
  <p>
   Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🌅
  </div>
  <h3>
   Outdoor Ceremony
  </h3>
  <p>
   Multiple outdoor ceremony locations including our garden pavilion and riverside grove.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   👰
  </div>
  <h3>
   Bridal Suite
  </h3>
  <p>
   Spacious bridal suite with private entrance, full amenities, and stunning views for preparation.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🍽️
  </div>
  <h3>
   Catering Excellence
  </h3>
  <p>
   Full-service kitchen and partnerships with the region's finest caterers and culinary artists.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   📸
  </div>
  <h3>
   Photo Opportunities
  </h3>
  <p>
   Countless scenic backdrops including vintage bridges, wildflower meadows, and golden hour vineyard rows.
  </p>
 </div>
</div>
CSS
.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
.features-grid { grid-template-columns: 1fr; }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Forms - Contact

FORMS html> comp-322

A forms component containing links. Contains 7 child elements.

Begin Your Love Story

Let us help you create the wedding of your dreams
at Rum River Barn & Vineyard

SCHEDULE A TOUR REQUEST PRICING

📍 123 River Valley Road, Countryside, MN 55555
📞 (555) 123-4567 | ✉️ weddings@rumriverbarn.com

...
HTML
<section class="contact" id="contact">
 <h2>
  Begin Your Love Story
 </h2>
 <p class="contact-info">
  Let us help you create the wedding of your dreams
  <br/>
  at Rum River Barn & Vineyard
 </p>
 <a class="contact-button" href="#">
  SCHEDULE A TOUR
 </a>
 <a class="contact-button" href="#">
  REQUEST PRICING
 </a>
 <p style="margin-top: 40px; opacity: 0.8;">
  📍 123 River Valley Road, Countryside, MN 55555
  <br/>
  📞 (555) 123-4567 | ✉️ weddings@rumriverbarn.com
 </p>
</section>
CSS
.contact-info {
            font-size: 20px;
            margin-bottom: 40px;
            opacity: 0.9;
        }
.contact-button {
            display: inline-block;
            padding: 15px 40px;
            background: var(--light);
            color: var(--dark);
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 50px;
            transition: all 0.4s ease;
            margin: 10px;
        }
.contact-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(255,255,255,0.3);
        }
.contact {
            padding: 100px 50px;
            background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
            color: var(--light);
            text-align: center;
        }
.contact h2 {
            font-size: 48px;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }

Cards - Feature Card

CARDS html> comp-324

A cards component. Contains 3 child elements.

🏛️

Historic Barn

Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  🏛️
 </div>
 <h3>
  Historic Barn
 </h3>
 <p>
  Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.
 </p>
</div>
CSS
.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-325

A cards component. Contains 3 child elements.

🍇

Vineyard Views

Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  🍇
 </div>
 <h3>
  Vineyard Views
 </h3>
 <p>
  Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.
 </p>
</div>
CSS
.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-326

A cards component. Contains 3 child elements.

🌅

Outdoor Ceremony

Multiple outdoor ceremony locations including our garden pavilion and riverside grove.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  🌅
 </div>
 <h3>
  Outdoor Ceremony
 </h3>
 <p>
  Multiple outdoor ceremony locations including our garden pavilion and riverside grove.
 </p>
</div>
CSS
.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-327

A cards component. Contains 3 child elements.

👰

Bridal Suite

Spacious bridal suite with private entrance, full amenities, and stunning views for preparation.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  👰
 </div>
 <h3>
  Bridal Suite
 </h3>
 <p>
  Spacious bridal suite with private entrance, full amenities, and stunning views for preparation.
 </p>
</div>
CSS
.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-328

A cards component. Contains 3 child elements.

🍽️

Catering Excellence

Full-service kitchen and partnerships with the region's finest caterers and culinary artists.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  🍽️
 </div>
 <h3>
  Catering Excellence
 </h3>
 <p>
  Full-service kitchen and partnerships with the region's finest caterers and culinary artists.
 </p>
</div>
CSS
.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-329

A cards component. Contains 3 child elements.

📸

Photo Opportunities

Countless scenic backdrops including vintage bridges, wildflower meadows, and golden hour vineyard rows.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  📸
 </div>
 <h3>
  Photo Opportunities
 </h3>
 <p>
  Countless scenic backdrops including vintage bridges, wildflower meadows, and golden hour vineyard rows.
 </p>
</div>
CSS
.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Sections - Section Container

SECTIONS html> comp-330

A sections component. Contains 10 child elements.

Your Perfect Day
Awaits

Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.

With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchant...

HTML
<div class="section-container">
 <div class="about-grid">
  <div class="about-content">
   <h2>
    Your
    <span class="accent-text">
     Perfect Day
    </span>
    <br/>
    Awaits
   </h2>
   <p>
    Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.
   </p>
   <p>
    With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.
   </p>
   <p>
    Every wedding here tells a unique story, and we're honored to be part of yours.
   </p>
  </div>
  <div class="about-image">
   <div class="image-placeholder">
   </div>
  </div>
 </div>
</div>
CSS
.about-content h2 {
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
            animation: slideInLeft 1s ease;
        }
.image-placeholder:hover {
            transform: scale(1.05) rotate(1deg);
        }
.image-placeholder::after {
            content: 'Rustic Barn Interior';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(255,255,255,0.7);
            font-size: 24px;
            letter-spacing: 3px;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
.about-grid, .features-grid { grid-template-columns: 1fr; }
.about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease 0.3s both;
        }
.image-placeholder {
            width: 100%;
            height: 500px;
            background: linear-gradient(135deg, var(--sage) 0%, var(--primary) 100%);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            transition: transform 0.5s ease;
        }
.about-image {
            position: relative;
            animation: slideInRight 1s ease;
        }
.section-container {
            max-width: 1200px;
            margin: 0 auto;
        }

Sections - About

SECTIONS html> comp-332

A sections component. Contains 11 child elements.

Your Perfect Day
Awaits

Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.

With sprawling vineyards, century-old oak trees, and breathtaking sunset vie...

HTML
<section class="about" id="about">
 <div class="section-container">
  <div class="about-grid">
   <div class="about-content">
    <h2>
     Your
     <span class="accent-text">
      Perfect Day
     </span>
     <br/>
     Awaits
    </h2>
    <p>
     Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.
    </p>
    <p>
     With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.
    </p>
    <p>
     Every wedding here tells a unique story, and we're honored to be part of yours.
    </p>
   </div>
   <div class="about-image">
    <div class="image-placeholder">
    </div>
   </div>
  </div>
 </div>
</section>
CSS
.about-content h2 {
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
            animation: slideInLeft 1s ease;
        }
.image-placeholder:hover {
            transform: scale(1.05) rotate(1deg);
        }
.image-placeholder::after {
            content: 'Rustic Barn Interior';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(255,255,255,0.7);
            font-size: 24px;
            letter-spacing: 3px;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.about {
            padding: 120px 50px;
            background: var(--light);
            position: relative;
        }
.about::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
        }
.about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
.about-grid, .features-grid { grid-template-columns: 1fr; }
.about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease 0.3s both;
        }
.image-placeholder {
            width: 100%;
            height: 500px;
            background: linear-gradient(135deg, var(--sage) 0%, var(--primary) 100%);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            transition: transform 0.5s ease;
        }
.about-image {
            position: relative;
            animation: slideInRight 1s ease;
        }
.section-container {
            max-width: 1200px;
            margin: 0 auto;
        }

Sections - Features

SECTIONS html> comp-333

A sections component. Contains 27 child elements.

Exceptional Amenities

🏛️

Historic Barn

Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.

🍇

Vineyard V...

HTML
<section class="features" id="features">
 <h2>
  Exceptional
  <span class="accent-text">
   Amenities
  </span>
 </h2>
 <div class="features-grid">
  <div class="feature-card">
   <div class="feature-icon">
    🏛️
   </div>
   <h3>
    Historic Barn
   </h3>
   <p>
    Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    🍇
   </div>
   <h3>
    Vineyard Views
   </h3>
   <p>
    Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    🌅
   </div>
   <h3>
    Outdoor Ceremony
   </h3>
   <p>
    Multiple outdoor ceremony locations including our garden pavilion and riverside grove.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    👰
   </div>
   <h3>
    Bridal Suite
   </h3>
   <p>
    Spacious bridal suite with private entrance, full amenities, and stunning views for preparation.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    🍽️
   </div>
   <h3>
    Catering Excellence
   </h3>
   <p>
    Full-service kitchen and partnerships with the region's finest caterers and culinary artists.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    📸
   </div>
   <h3>
    Photo Opportunities
   </h3>
   <p>
    Countless scenic backdrops including vintage bridges, wildflower meadows, and golden hour vineyard rows.
   </p>
  </div>
 </div>
</section>
CSS
.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
.features {
            padding: 100px 50px;
            background: linear-gradient(180deg, var(--light) 0%, #F5F0E8 100%);
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.features-grid { grid-template-columns: 1fr; }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.features h2 {
            text-align: center;
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 60px;
            letter-spacing: 2px;
        }

Sections - About Content

SECTIONS html> comp-346

A sections component. Contains 6 child elements.

Your Perfect Day
Awaits

Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.

With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.

Every wedding here tells a unique stor...

HTML
<div class="about-content">
 <h2>
  Your
  <span class="accent-text">
   Perfect Day
  </span>
  <br/>
  Awaits
 </h2>
 <p>
  Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.
 </p>
 <p>
  With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.
 </p>
 <p>
  Every wedding here tells a unique story, and we're honored to be part of yours.
 </p>
</div>
CSS
.about-content h2 {
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
            animation: slideInLeft 1s ease;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease 0.3s both;
        }

Heroes - Home

HEROES html> comp-355

A heroes component containing links. Contains 24 child elements.

HTML
<section class="hero" id="home">
 <div class="hero-background">
  <div class="hero-image-layer">
  </div>
  <div class="hero-pattern">
  </div>
  <div class="barn-silhouette">
  </div>
  <div class="light-rays">
  </div>
  <div class="particles">
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
  </div>
 </div>
 <div class="decorative-frame">
  <div class="vine-left">
  </div>
  <div class="vine-right">
  </div>
 </div>
 <div class="hero-content">
  <div class="hero-subtitle">
   WELCOME TO
  </div>
  <h1 class="hero-title">
   Rum River
   <br/>
   Barn & Vineyard
  </h1>
  <p class="hero-description">
   Where Rustic Charm Meets Timeless Romance
  </p>
  <a class="cta-button" href="#contact">
   START YOUR JOURNEY
  </a>
 </div>
</section>
CSS
.particle:nth-child(8) { left: 80%; width: 5px; height: 5px; animation-delay: 3s; animation-duration: 15s; }
.hero-content::after {
            content: '';
            position: absolute;
            top: -40px;
            left: -40px;
            right: -40px;
            bottom: -40px;
            border: 1px solid rgba(212, 165, 116, 0.1);
            border-radius: 30px;
            animation: pulse 4s ease-in-out infinite 0.5s;
        }
.vine-right {
            position: absolute;
            top: 10%;
            right: 5%;
            width: 200px;
            height: 400px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400"><path d="M20,0 Q50,50 40,100 T60,200 Q80,250 70,300 T80,400" stroke="%23D4A574" stroke-width="2" fill="none" opacity="0.3"/><circle cx="40" cy="80" r="8" fill="%23D4A574" opacity="0.2"/><circle cx="60" cy="180" r="6" fill="%23D4A574" opacity="0.2"/><circle cx="70" cy="280" r="7" fill="%23D4A574" opacity="0.2"/><path d="M40,80 Q60,70 70,85" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><path d="M60,180 Q80,170 90,185" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/></svg>');
            background-repeat: no-repeat;
            animation: swayRight 8s ease-in-out infinite;
        }
.cta-button:hover::before {
            width: 300px;
            height: 300px;
        }
.cta-button {
            display: inline-block;
            padding: 18px 45px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            color: var(--light);
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 50px;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            animation: pulse 2s infinite;
            position: relative;
            overflow: hidden;
        }
.particle:nth-child(2) { left: 20%; width: 4px; height: 4px; animation-delay: 2s; animation-duration: 15s; }
.barn-silhouette {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 60%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 600"><path d="M700,400 L700,200 L960,50 L1220,200 L1220,400 L1100,400 L1100,250 L960,150 L820,250 L820,400 Z" fill="%23000000" opacity="0.3"/><rect x="850" y="300" width="60" height="100" fill="%23D4A574" opacity="0.4"/><rect x="1010" y="300" width="60" height="100" fill="%23D4A574" opacity="0.4"/><path d="M0,600 Q200,500 400,550 T800,500 Q1000,450 1200,500 T1600,450 Q1760,400 1920,500 L1920,600 Z" fill="%231a1410" opacity="0.8"/></svg>');
            background-position: bottom center;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.6;
        }
.particle:nth-child(3) { left: 30%; width: 8px; height: 8px; animation-delay: 4s; animation-duration: 18s; }
.hero-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
        }
.hero-image-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #2C1810 0%, #8B7355 50%, #D4A574 100%);
            opacity: 0.6;
            animation: slowZoom 20s ease-in-out infinite alternate;
        }
.decorative-frame {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 5;
        }
.particles {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }
.particle:nth-child(9) { left: 90%; width: 8px; height: 8px; animation-delay: 5s; animation-duration: 14s; }
.particle:nth-child(1) { left: 10%; width: 6px; height: 6px; animation-delay: 0s; animation-duration: 12s; }
.cta-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
            transition: all 0.5s ease;
            transform: translate(-50%, -50%);
        }
.hero-description {
            font-size: 24px;
            font-style: italic;
            margin-bottom: 50px;
            opacity: 0.95;
            animation: fadeIn 2s ease 0.8s both;
            color: rgba(250, 247, 243, 0.9);
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }
.hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><pattern id="vines" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><path d="M50,0 Q100,50 50,100 T50,200" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><circle cx="50" cy="50" r="3" fill="%23D4A574" opacity="0.3"/><circle cx="50" cy="150" r="3" fill="%23D4A574" opacity="0.3"/></pattern></defs><rect width="1920" height="1080" fill="url(%23vines)"/><path d="M0,800 Q480,700 960,800 T1920,800 L1920,1080 L0,1080 Z" fill="%232C1810" opacity="0.5"/></svg>');
            background-size: cover;
            animation: float 15s ease-in-out infinite;
        }
.hero-subtitle {
            font-size: 18px;
            letter-spacing: 6px;
            margin-bottom: 20px;
            opacity: 0.9;
            animation: fadeIn 2s ease 0.5s both;
            position: relative;
            display: inline-block;
            padding: 0 60px;
        }
.hero-subtitle::after {
            right: 0;
        }
.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(212,165,116,0.4);
        }
.hero-subtitle::before {
            left: 0;
        }
.hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1410;
            overflow: hidden;
        }
.particle {
            position: absolute;
            background: radial-gradient(circle, rgba(212, 165, 116, 0.8) 0%, transparent 70%);
            border-radius: 50%;
            animation: floatUp 15s linear infinite;
        }
.hero-content {
            text-align: center;
            color: var(--light);
            z-index: 10;
            position: relative;
            animation: slideUp 1.5s ease;
            padding: 40px;
            background: radial-gradient(circle at center, rgba(44, 24, 16, 0.4) 0%, transparent 70%);
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }
.light-rays {
            position: absolute;
            top: -50%;
            left: -50%;
            right: -50%;
            bottom: -50%;
            background: conic-gradient(from 0deg at 50% 50%, 
                transparent 0deg,
                rgba(212, 165, 116, 0.1) 10deg,
                transparent 20deg,
                transparent 40deg,
                rgba(212, 165, 116, 0.1) 50deg,
                transparent 60deg,
                transparent 80deg,
                rgba(212, 165, 116, 0.1) 90deg,
                transparent 100deg,
                transparent 120deg,
                rgba(212, 165, 116, 0.1) 130deg,
                transparent 140deg,
                transparent 360deg
            );
            animation: rotate 60s linear infinite;
            opacity: 0.5;
        }
.hero-title {
            font-size: 82px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            letter-spacing: 3px;
            animation: slideUp 1.5s ease 0.3s both;
            background: linear-gradient(180deg, var(--light) 0%, rgba(212, 165, 116, 0.9) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
        }
.hero-title { font-size: 48px; }
.particle:nth-child(5) { left: 50%; width: 7px; height: 7px; animation-delay: 8s; animation-duration: 16s; }
.particle:nth-child(6) { left: 60%; width: 4px; height: 4px; animation-delay: 10s; animation-duration: 13s; }
.hero-content::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border: 2px solid rgba(212, 165, 116, 0.3);
            border-radius: 25px;
            animation: pulse 4s ease-in-out infinite;
        }
.particle:nth-child(4) { left: 40%; width: 5px; height: 5px; animation-delay: 6s; animation-duration: 14s; }
.vine-left {
            position: absolute;
            top: 10%;
            left: 5%;
            width: 200px;
            height: 400px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400"><path d="M180,0 Q150,50 160,100 T140,200 Q120,250 130,300 T120,400" stroke="%23D4A574" stroke-width="2" fill="none" opacity="0.3"/><circle cx="160" cy="80" r="8" fill="%23D4A574" opacity="0.2"/><circle cx="140" cy="180" r="6" fill="%23D4A574" opacity="0.2"/><circle cx="130" cy="280" r="7" fill="%23D4A574" opacity="0.2"/><path d="M160,80 Q140,70 130,85" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><path d="M140,180 Q120,170 110,185" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/></svg>');
            background-repeat: no-repeat;
            animation: swayLeft 8s ease-in-out infinite;
        }
.hero-subtitle::before,
        .hero-subtitle::after {
            content: '❦';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent);
            font-size: 24px;
            animation: pulse 2s ease-in-out infinite;
        }
.particle:nth-child(7) { left: 70%; width: 6px; height: 6px; animation-delay: 1s; animation-duration: 17s; }

Headers - Features Header

HEADERS html> comp-387

A headers component. Contains 2 child elements.

Why Choose Us

400 Acres of Pure Country Magic

...
HTML
<div class="features-header">
 <p class="script-font">
  Why Choose Us
 </p>
 <h2>
  400 Acres of Pure Country Magic
 </h2>
</div>
CSS
.features-header {
            text-align: center;
            margin-bottom: 80px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.features-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.features-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

Headers - Timeline Header

HEADERS html> comp-388

A headers component. Contains 3 child elements.

Your Journey

From First Visit to "I Do"

We're with you every step of the way, ensuring your special day unfolds perfectly.

...
HTML
<div class="timeline-header">
 <p class="script-font">
  Your Journey
 </p>
 <h2>
  From First Visit to "I Do"
 </h2>
 <p>
  We're with you every step of the way, ensuring your special day unfolds perfectly.
 </p>
</div>
CSS
.timeline-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.timeline-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.timeline-header p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            max-width: 600px;
            margin: 0 auto;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.timeline-header {
            text-align: center;
            margin-bottom: 80px;
        }

Headers - Testimonials Header

HEADERS html> comp-389

A headers component. Contains 2 child elements.

Love Stories

What Our Couples Say

...
HTML
<div class="testimonials-header">
 <p class="script-font">
  Love Stories
 </p>
 <h2>
  What Our Couples Say
 </h2>
</div>
CSS
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.testimonials-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.testimonials-header {
            text-align: center;
            margin-bottom: 80px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.testimonials-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
        }

Headers - Faq Header

HEADERS html> comp-390

A headers component. Contains 2 child elements.

Questions?

Everything You Need to Know

...
HTML
<div class="faq-header">
 <p class="script-font">
  Questions?
 </p>
 <h2>
  Everything You Need to Know
 </h2>
</div>
CSS
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.faq-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.faq-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.faq-header {
            text-align: center;
            margin-bottom: 80px;
        }

Headers - Gallery Header

HEADERS html> comp-391

A headers component. Contains 2 child elements.

...
HTML
<div class="gallery-header">
 <p class="script-font">
  Explore
 </p>
 <h2>
  Our Scenic Spaces
 </h2>
</div>
CSS
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.gallery-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.gallery-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.gallery-header {
            text-align: center;
            margin-bottom: 80px;
        }

Heroes - Split Hero

HEROES html> comp-392

A heroes component containing images. Contains 17 child elements.

Your Dream Venue Awaits

A Picturesque Setting for Your Perfect Day

When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.

Unlike traditional ven...

HTML
<section class="split-hero">
 <div class="split-hero-container">
  <div class="split-content">
   <p class="script-font">
    Your Dream Venue Awaits
   </p>
   <h2>
    A Picturesque Setting for Your Perfect Day
   </h2>
   <p>
    When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.
   </p>
   <p>
    Unlike traditional venues, we believe in saying "yes" to your vision. Your celebration, your way—with our full support to bring every detail to life.
   </p>
   <div class="location-tags">
    <span class="location-tag">
     NEAR MILACA
    </span>
    <span class="location-tag">
     SAINT PAUL
    </span>
    <span class="location-tag">
     ST. CLOUD
    </span>
    <span class="location-tag">
     BRAINERD
    </span>
   </div>
   <p style="color: var(--primary-brown); font-weight: bold;">
    📞 Reserve Your Date: 612-801-0546
   </p>
  </div>
  <div class="split-image">
   <img alt="Rum River Barn exterior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=1000"/>
   <div class="split-image-overlay">
    <h4>
     Book Early
    </h4>
    <p>
     Our calendar fills quickly—secure your perfect date today!
    </p>
   </div>
  </div>
 </div>
</section>
CSS
.location-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
        }
.split-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.split-image-overlay {
            position: absolute;
            bottom: 40px;
            left: 40px;
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }
.split-hero {
            position: relative;
            min-height: 600px;
            overflow: hidden;
            background: white;
        }
.split-hero-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 600px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.split-content .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.split-content::after {
            content: '';
            position: absolute;
            right: -100px;
            top: 0;
            bottom: 0;
            width: 200px;
            background: var(--warm-cream);
            transform: skewX(-5deg);
        }
.split-content h2 {
            font-size: 52px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }
.split-image-overlay h4 {
            color: var(--deep-brown);
            font-size: 24px;
            margin-bottom: 10px;
        }
.split-content h2 {
                font-size: 36px;
            }
.split-image-overlay p {
            color: var(--text-light);
            font-size: 14px;
        }
.split-hero-container {
                grid-template-columns: 1fr;
            }
.split-content::after {
                display: none;
            }
.split-content {
                padding: 60px 40px;
            }
.split-content p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 20px;
        }
.location-tag {
            background: rgba(212, 165, 116, 0.1);
            color: var(--primary-brown);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            transition: all 0.3s ease;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.split-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 80px;
            background: linear-gradient(135deg, var(--warm-cream) 0%, white 100%);
            position: relative;
        }
.location-tag:hover {
            background: var(--accent-gold);
            color: white;
            transform: translateY(-2px);
        }
.split-image {
            position: relative;
            overflow: hidden;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

Heroes - Split Hero Container

HEROES html> comp-393

A heroes component containing images. Contains 16 child elements.

Your Dream Venue Awaits

A Picturesque Setting for Your Perfect Day

When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.

Unlike traditional venues, we believe in saying "yes" to your vi...

HTML
<div class="split-hero-container">
 <div class="split-content">
  <p class="script-font">
   Your Dream Venue Awaits
  </p>
  <h2>
   A Picturesque Setting for Your Perfect Day
  </h2>
  <p>
   When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.
  </p>
  <p>
   Unlike traditional venues, we believe in saying "yes" to your vision. Your celebration, your way—with our full support to bring every detail to life.
  </p>
  <div class="location-tags">
   <span class="location-tag">
    NEAR MILACA
   </span>
   <span class="location-tag">
    SAINT PAUL
   </span>
   <span class="location-tag">
    ST. CLOUD
   </span>
   <span class="location-tag">
    BRAINERD
   </span>
  </div>
  <p style="color: var(--primary-brown); font-weight: bold;">
   📞 Reserve Your Date: 612-801-0546
  </p>
 </div>
 <div class="split-image">
  <img alt="Rum River Barn exterior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=1000"/>
  <div class="split-image-overlay">
   <h4>
    Book Early
   </h4>
   <p>
    Our calendar fills quickly—secure your perfect date today!
   </p>
  </div>
 </div>
</div>
CSS
.location-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
        }
.split-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.split-image-overlay {
            position: absolute;
            bottom: 40px;
            left: 40px;
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }
.split-hero-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 600px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.split-content .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.split-content::after {
            content: '';
            position: absolute;
            right: -100px;
            top: 0;
            bottom: 0;
            width: 200px;
            background: var(--warm-cream);
            transform: skewX(-5deg);
        }
.split-content h2 {
            font-size: 52px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }
.split-image-overlay h4 {
            color: var(--deep-brown);
            font-size: 24px;
            margin-bottom: 10px;
        }
.split-content h2 {
                font-size: 36px;
            }
.split-image-overlay p {
            color: var(--text-light);
            font-size: 14px;
        }
.split-hero-container {
                grid-template-columns: 1fr;
            }
.split-content::after {
                display: none;
            }
.split-content {
                padding: 60px 40px;
            }
.split-content p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 20px;
        }
.location-tag {
            background: rgba(212, 165, 116, 0.1);
            color: var(--primary-brown);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            transition: all 0.3s ease;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.split-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 80px;
            background: linear-gradient(135deg, var(--warm-cream) 0%, white 100%);
            position: relative;
        }
.location-tag:hover {
            background: var(--accent-gold);
            color: white;
            transform: translateY(-2px);
        }
.split-image {
            position: relative;
            overflow: hidden;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

Heroes - Cta Banner

HEROES html> comp-394

A heroes component containing buttons, links. Contains 8 child elements.

Ready to Start Planning?

Your Perfect Day Awaits

Don't wait to secure your date at Minnesota's premier barn wedding venue. Our calendar fills quickly, and we'd love to show you around our beautiful 400-acre property.

Call 612-801-0546
HTML
<section class="cta-banner">
 <div class="container">
  <div class="cta-content">
   <p class="script-font">
    Ready to Start Planning?
   </p>
   <h2>
    Your Perfect Day Awaits
   </h2>
   <p>
    Don't wait to secure your date at Minnesota's premier barn wedding venue. Our calendar fills quickly, and we'd love to show you around our beautiful 400-acre property.
   </p>
   <div class="cta-buttons">
    <a class="btn-primary" href="tel:612-801-0546">
     Call 612-801-0546
    </a>
    <a class="btn-secondary" href="#tour">
     Schedule a Tour
    </a>
   </div>
  </div>
 </div>
</section>
CSS
.cta-content p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.9);
            max-width: 700px;
            margin: 0 auto 40px;
            line-height: 1.8;
        }
.btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.cta-buttons {
                flex-direction: column;
                align-items: center;
            }
.btn-secondary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
        }
.btn-primary,
        .btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
.cta-content .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.cta-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
            animation: rotate 30s linear infinite;
        }
.btn-primary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
        }
.cta-content {
            text-align: center;
            position: relative;
            z-index: 1;
        }
.cta-content h2 {
                font-size: 36px;
            }
.cta-content h2 {
            font-size: 56px;
            color: white;
            margin-bottom: 30px;
            line-height: 1.2;
        }
.btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.cta-banner {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--wine) 0%, var(--deep-brown) 100%);
            position: relative;
            overflow: hidden;
        }
.btn-secondary {
                width: 100%;
                max-width: 300px;
            }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.btn-primary {
            background: var(--accent-gold);
            color: white;
            box-shadow: 0 6px 25px rgba(212, 165, 116, 0.4);
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.btn-primary,
            .btn-secondary {
                width: 100%;
                max-width: 300px;
            }

Galleries - Gallery Section

GALLERIES html> comp-395

A galleries component containing images, buttons. Contains 41 child elements.

Galleries - Gallery Filters

GALLERIES html> comp-397

A galleries component containing buttons. Contains 5 child elements.

...
HTML
<div class="gallery-filters">
 <button class="filter-btn active">
  All
 </button>
 <button class="filter-btn">
  Ceremony
 </button>
 <button class="filter-btn">
  Reception
 </button>
 <button class="filter-btn">
  Grounds
 </button>
 <button class="filter-btn">
  Details
 </button>
</div>
CSS
.filter-btn.active,
        .filter-btn:hover {
            background: var(--accent-gold);
            color: white;
        }
.active .faq-toggle {
            transform: rotate(45deg);
        }
.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.gallery-filters {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.active,
        .filter-btn:hover {
            background: var(--accent-gold);
            color: white;
        }
.filter-btn {
            padding: 12px 30px;
            background: white;
            border: 2px solid var(--accent-gold);
            border-radius: 30px;
            color: var(--primary-brown);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Galleries - Gallery Grid

GALLERIES html> comp-398

A galleries component containing images. Contains 30 child elements.

Galleries - Gallery Item

GALLERIES html> comp-399

A galleries component containing images. Contains 4 child elements.

...
HTML
<div class="gallery-item">
 <img alt="Barn Interior" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600"/>
 <div class="gallery-overlay">
  <h4>
   The Historic Barn
  </h4>
  <p>
   Restored with love, ready for celebration
  </p>
 </div>
</div>
CSS
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-400

A galleries component. Contains 2 child elements.

...
HTML
<div class="gallery-overlay">
 <h4>
  The Historic Barn
 </h4>
 <p>
  Restored with love, ready for celebration
 </p>
</div>
CSS
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item Tall

GALLERIES html> comp-401

A galleries component containing images. Contains 4 child elements.

...
HTML
<div class="gallery-item tall">
 <img alt="Vineyard View" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Vineyard Overlook
  </h4>
  <p>
   Say "I do" with stunning views
  </p>
 </div>
</div>
CSS
.tall {
            grid-row: span 2;
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-402

A galleries component. Contains 2 child elements.

...
HTML
<div class="gallery-overlay">
 <h4>
  Vineyard Overlook
 </h4>
 <p>
  Say "I do" with stunning views
 </p>
</div>
CSS
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item

GALLERIES html> comp-403

A galleries component containing images. Contains 4 child elements.

...
HTML
<div class="gallery-item">
 <img alt="Reception Setup" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Reception Ready
  </h4>
  <p>
   Elegant rustic dining spaces
  </p>
 </div>
</div>
CSS
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-404

A galleries component. Contains 2 child elements.

...
HTML
<div class="gallery-overlay">
 <h4>
  Reception Ready
 </h4>
 <p>
  Elegant rustic dining spaces
 </p>
</div>
CSS
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item

GALLERIES html> comp-405

A galleries component containing images. Contains 4 child elements.

...
HTML
<div class="gallery-item">
 <img alt="Oak Grove" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Century Oak Grove
  </h4>
  <p>
   Natural cathedral for ceremonies
  </p>
 </div>
</div>
CSS
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-406

A galleries component. Contains 2 child elements.

...
HTML
<div class="gallery-overlay">
 <h4>
  Century Oak Grove
 </h4>
 <p>
  Natural cathedral for ceremonies
 </p>
</div>
CSS
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item

GALLERIES html> comp-407

A galleries component containing images. Contains 4 child elements.

...
HTML
<div class="gallery-item">
 <img alt="Sunset Photos" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Golden Hour Magic
  </h4>
  <p>
   Perfect lighting for photos
  </p>
 </div>
</div>
CSS
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-408

A galleries component. Contains 2 child elements.

...
HTML
<div class="gallery-overlay">
 <h4>
  Golden Hour Magic
 </h4>
 <p>
  Perfect lighting for photos
 </p>
</div>
CSS
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item Tall

GALLERIES html> comp-409

A galleries component containing images. Contains 4 child elements.

...
HTML
<div class="gallery-item tall">
 <img alt="Brook Path" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Whispering Brook Trail
  </h4>
  <p>
   Romantic walks and photo ops
  </p>
 </div>
</div>
CSS
.tall {
            grid-row: span 2;
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-410

A galleries component. Contains 2 child elements.

...
HTML
<div class="gallery-overlay">
 <h4>
  Whispering Brook Trail
 </h4>
 <p>
  Romantic walks and photo ops
 </p>
</div>
CSS
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Features Grid

GALLERIES html> comp-411

A galleries component. Contains 24 child elements.

🍇

Vineyard Views

Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.

🌳

Century-Old Oaks

Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.

<...
HTML
<div class="features-grid">
 <div class="feature-card">
  <div class="feature-icon">
   🍇
  </div>
  <h3>
   Vineyard Views
  </h3>
  <p>
   Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🌳
  </div>
  <h3>
   Century-Old Oaks
  </h3>
  <p>
   Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🏚️
  </div>
  <h3>
   Historic Barn
  </h3>
  <p>
   Our restored barn combines 100 years of history with modern amenities for the perfect rustic elegance.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   💧
  </div>
  <h3>
   Whispering Brook
  </h3>
  <p>
   A peaceful stream winds through the property, offering serene ceremony spots and romantic photo opportunities.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   ✨
  </div>
  <h3>
   Your Vision, Our Yes
  </h3>
  <p>
   We believe in making dreams reality—bring your wildest ideas and watch us help them come to life.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🌄
  </div>
  <h3>
   Hillside Serenity
  </h3>
  <p>
   Perched on a peaceful hillside, enjoy panoramic views and the tranquil atmosphere of rural Minnesota.
  </p>
 </div>
</div>
CSS
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.features-grid,
            .timeline-items,
            .stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Galleries - Stats Grid

GALLERIES html> comp-412

A galleries component. Contains 12 child elements.

400
Scenic Acres
100+
Years of History
300
Guest Capacity
5★
HTML
<div class="stats-grid">
 <div class="stat-item">
  <div class="stat-number">
   400
  </div>
  <div class="stat-label">
   Scenic Acres
  </div>
 </div>
 <div class="stat-item">
  <div class="stat-number">
   100+
  </div>
  <div class="stat-label">
   Years of History
  </div>
 </div>
 <div class="stat-item">
  <div class="stat-number">
   300
  </div>
  <div class="stat-label">
   Guest Capacity
  </div>
 </div>
 <div class="stat-item">
  <div class="stat-number">
   5★
  </div>
  <div class="stat-label">
   Average Rating
  </div>
 </div>
</div>
CSS
.stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            text-align: center;
        }
.stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.stat-number {
            font-size: 64px;
            font-weight: bold;
            color: var(--accent-gold);
            margin-bottom: 10px;
            font-family: 'Playfair Display', Georgia, serif;
        }
.stat-label {
            font-size: 18px;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.9;
        }
.stat-item {
            color: white;
        }

Cards - Feature Card

CARDS html> comp-414

A cards component. Contains 3 child elements.

🍇

Vineyard Views

Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  🍇
 </div>
 <h3>
  Vineyard Views
 </h3>
 <p>
  Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.
 </p>
</div>
CSS
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-415

A cards component. Contains 3 child elements.

🌳

Century-Old Oaks

Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  🌳
 </div>
 <h3>
  Century-Old Oaks
 </h3>
 <p>
  Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.
 </p>
</div>
CSS
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-416

A cards component. Contains 3 child elements.

🏚️

Historic Barn

Our restored barn combines 100 years of history with modern amenities for the perfect rustic elegance.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  🏚️
 </div>
 <h3>
  Historic Barn
 </h3>
 <p>
  Our restored barn combines 100 years of history with modern amenities for the perfect rustic elegance.
 </p>
</div>
CSS
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-417

A cards component. Contains 3 child elements.

💧

Whispering Brook

A peaceful stream winds through the property, offering serene ceremony spots and romantic photo opportunities.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  💧
 </div>
 <h3>
  Whispering Brook
 </h3>
 <p>
  A peaceful stream winds through the property, offering serene ceremony spots and romantic photo opportunities.
 </p>
</div>
CSS
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-418

A cards component. Contains 3 child elements.

Your Vision, Our Yes

We believe in making dreams reality—bring your wildest ideas and watch us help them come to life.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  ✨
 </div>
 <h3>
  Your Vision, Our Yes
 </h3>
 <p>
  We believe in making dreams reality—bring your wildest ideas and watch us help them come to life.
 </p>
</div>
CSS
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-419

A cards component. Contains 3 child elements.

🌄

Hillside Serenity

Perched on a peaceful hillside, enjoy panoramic views and the tranquil atmosphere of rural Minnesota.

...
HTML
<div class="feature-card">
 <div class="feature-icon">
  🌄
 </div>
 <h3>
  Hillside Serenity
 </h3>
 <p>
  Perched on a peaceful hillside, enjoy panoramic views and the tranquil atmosphere of rural Minnesota.
 </p>
</div>
CSS
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Testimonial Card

CARDS html> comp-420

A cards component containing images. Contains 12 child elements.

"Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"

Sarah

Sarah & Michael Johnson
HTML
<div class="testimonial-card">
 <p class="testimonial-text">
  "Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"
 </p>
 <div class="testimonial-author">
  <img alt="Sarah" class="author-image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
  <div class="author-info">
   <h4>
    Sarah & Michael Johnson
   </h4>
   <p>
    Married June 2024
   </p>
  </div>
 </div>
 <div class="rating">
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
 </div>
</div>
CSS
.testimonial-card {
            background: white;
            padding: 60px;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            text-align: center;
            position: relative;
        }
.testimonial-text {
            font-size: 22px;
            line-height: 1.8;
            color: var(--text-dark);
            margin-bottom: 40px;
            font-style: italic;
        }
.author-info p {
            color: var(--text-light);
            font-size: 14px;
        }
.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 30px;
            left: 40px;
            font-size: 120px;
            color: var(--accent-gold);
            opacity: 0.2;
            font-family: Georgia, serif;
        }
.author-info h4 {
            font-size: 20px;
            color: var(--deep-brown);
            margin-bottom: 5px;
        }
.star {
            color: var(--accent-gold);
            font-size: 20px;
        }
.rating {
            display: flex;
            gap: 5px;
            justify-content: center;
            margin-top: 20px;
        }
.testimonial-card {
                padding: 40px 30px;
            }
.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
        }
.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

Cards - Testimonials Section

CARDS html> comp-421

A cards component containing images. Contains 18 child elements.

Love Stories

What Our Couples Say

"Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are stil...

HTML
<section class="testimonials-section">
 <div class="container">
  <div class="testimonials-header">
   <p class="script-font">
    Love Stories
   </p>
   <h2>
    What Our Couples Say
   </h2>
  </div>
  <div class="testimonials-container">
   <div class="testimonial-card">
    <p class="testimonial-text">
     "Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"
    </p>
    <div class="testimonial-author">
     <img alt="Sarah" class="author-image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
     <div class="author-info">
      <h4>
       Sarah & Michael Johnson
      </h4>
      <p>
       Married June 2024
      </p>
     </div>
    </div>
    <div class="rating">
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
    </div>
   </div>
  </div>
 </div>
</section>
CSS
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.testimonials-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.testimonials-header {
            text-align: center;
            margin-bottom: 80px;
        }
.author-info p {
            color: var(--text-light);
            font-size: 14px;
        }
.rating {
            display: flex;
            gap: 5px;
            justify-content: center;
            margin-top: 20px;
        }
.testimonial-card {
                padding: 40px 30px;
            }
.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
        }
.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }
.testimonial-text {
            font-size: 22px;
            line-height: 1.8;
            color: var(--text-dark);
            margin-bottom: 40px;
            font-style: italic;
        }
.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 30px;
            left: 40px;
            font-size: 120px;
            color: var(--accent-gold);
            opacity: 0.2;
            font-family: Georgia, serif;
        }
.author-info h4 {
            font-size: 20px;
            color: var(--deep-brown);
            margin-bottom: 5px;
        }
.testimonials-section {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--warm-cream) 0%, white 50%, var(--warm-cream) 100%);
        }
.star {
            color: var(--accent-gold);
            font-size: 20px;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.testimonial-card {
            background: white;
            padding: 60px;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            text-align: center;
            position: relative;
        }
.testimonials-container {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.testimonials-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
        }

Cards - Testimonials Container

CARDS html> comp-423

A cards component containing images. Contains 13 child elements.

"Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"

Sarah
...
HTML
<div class="testimonials-container">
 <div class="testimonial-card">
  <p class="testimonial-text">
   "Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"
  </p>
  <div class="testimonial-author">
   <img alt="Sarah" class="author-image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
   <div class="author-info">
    <h4>
     Sarah & Michael Johnson
    </h4>
    <p>
     Married June 2024
    </p>
   </div>
  </div>
  <div class="rating">
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
  </div>
 </div>
</div>
CSS
.testimonial-card {
            background: white;
            padding: 60px;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            text-align: center;
            position: relative;
        }
.testimonials-container {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }
.testimonial-text {
            font-size: 22px;
            line-height: 1.8;
            color: var(--text-dark);
            margin-bottom: 40px;
            font-style: italic;
        }
.author-info p {
            color: var(--text-light);
            font-size: 14px;
        }
.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 30px;
            left: 40px;
            font-size: 120px;
            color: var(--accent-gold);
            opacity: 0.2;
            font-family: Georgia, serif;
        }
.author-info h4 {
            font-size: 20px;
            color: var(--deep-brown);
            margin-bottom: 5px;
        }
.star {
            color: var(--accent-gold);
            font-size: 20px;
        }
.rating {
            display: flex;
            gap: 5px;
            justify-content: center;
            margin-top: 20px;
        }
.testimonial-card {
                padding: 40px 30px;
            }
.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
        }
.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

Cards - Testimonial Author

CARDS html> comp-425

A cards component containing images. Contains 4 child elements.

Sarah

Sarah & Michael Johnson

Married June 2024

...
HTML
<div class="testimonial-author">
 <img alt="Sarah" class="author-image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
 <div class="author-info">
  <h4>
   Sarah & Michael Johnson
  </h4>
  <p>
   Married June 2024
  </p>
 </div>
</div>
CSS
.author-info h4 {
            font-size: 20px;
            color: var(--deep-brown);
            margin-bottom: 5px;
        }
.author-info p {
            color: var(--text-light);
            font-size: 14px;
        }
.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
        }
.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

Sections - Features Section

SECTIONS html> comp-426

A sections component. Contains 29 child elements.

Why Choose Us

400 Acres of Pure Country Magic

🍇

Vineyard Views

Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.

<...
HTML
<section class="features-section">
 <div class="container">
  <div class="features-header">
   <p class="script-font">
    Why Choose Us
   </p>
   <h2>
    400 Acres of Pure Country Magic
   </h2>
  </div>
  <div class="features-grid">
   <div class="feature-card">
    <div class="feature-icon">
     🍇
    </div>
    <h3>
     Vineyard Views
    </h3>
    <p>
     Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     🌳
    </div>
    <h3>
     Century-Old Oaks
    </h3>
    <p>
     Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     🏚️
    </div>
    <h3>
     Historic Barn
    </h3>
    <p>
     Our restored barn combines 100 years of history with modern amenities for the perfect rustic elegance.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     💧
    </div>
    <h3>
     Whispering Brook
    </h3>
    <p>
     A peaceful stream winds through the property, offering serene ceremony spots and romantic photo opportunities.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     ✨
    </div>
    <h3>
     Your Vision, Our Yes
    </h3>
    <p>
     We believe in making dreams reality—bring your wildest ideas and watch us help them come to life.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     🌄
    </div>
    <h3>
     Hillside Serenity
    </h3>
    <p>
     Perched on a peaceful hillside, enjoy panoramic views and the tranquil atmosphere of rural Minnesota.
    </p>
   </div>
  </div>
 </div>
</section>
CSS
.features-header {
            text-align: center;
            margin-bottom: 80px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
.features-grid,
            .timeline-items,
            .stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.features-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.features-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.features-section {
            padding: 100px 0;
            background: linear-gradient(180deg, white 0%, var(--warm-cream) 100%);
        }

Sections - Timeline Section

SECTIONS html> comp-427

A sections component. Contains 22 child elements.

Your Journey

From First Visit to "I Do"

We're with you every step of the way, ensuring your special day unfolds perfectly.

1

Schedule Your Tour

Walk our...

HTML
<section class="timeline-section">
 <div class="container timeline-container">
  <div class="timeline-header">
   <p class="script-font">
    Your Journey
   </p>
   <h2>
    From First Visit to "I Do"
   </h2>
   <p>
    We're with you every step of the way, ensuring your special day unfolds perfectly.
   </p>
  </div>
  <div class="timeline-items">
   <div class="timeline-item">
    <div class="timeline-number">
     1
    </div>
    <h3>
     Schedule Your Tour
    </h3>
    <p>
     Walk our grounds, explore the barn, and envision your celebration in our scenic spaces.
    </p>
   </div>
   <div class="timeline-item">
    <div class="timeline-number">
     2
    </div>
    <h3>
     Design Your Day
    </h3>
    <p>
     Work with our team to customize every detail—from ceremony location to reception layout.
    </p>
   </div>
   <div class="timeline-item">
    <div class="timeline-number">
     3
    </div>
    <h3>
     Vendor Freedom
    </h3>
    <p>
     Choose your own caterers, florists, and musicians—or select from our preferred partners.
    </p>
   </div>
   <div class="timeline-item">
    <div class="timeline-number">
     4
    </div>
    <h3>
     Celebrate in Style
    </h3>
    <p>
     Relax and enjoy as your vision comes to life in Minnesota's premier barn venue.
    </p>
   </div>
  </div>
 </div>
</section>
CSS
.timeline-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.timeline-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.timeline-header p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            max-width: 600px;
            margin: 0 auto;
        }
.timeline-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            position: relative;
        }
.timeline-item h3 {
            font-size: 24px;
            color: white;
            margin-bottom: 15px;
        }
.timeline-item p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }
.timeline-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(212, 165, 116, 0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.timeline-container {
            position: relative;
            z-index: 1;
        }
.timeline-number {
            width: 60px;
            height: 60px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            margin: 0 auto 20px;
            font-weight: bold;
        }
.timeline-items,
            .stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.timeline-section {
            padding: 100px 0;
            background: var(--deep-brown);
            position: relative;
            overflow: hidden;
        }
.timeline-item {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(212, 165, 116, 0.2);
            padding: 40px 30px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.timeline-header {
            text-align: center;
            margin-bottom: 80px;
        }
.timeline-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-5px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }

Sections - Stats Section

SECTIONS html> comp-429

A sections component. Contains 14 child elements.

400
Scenic Acres
100+
Years of History
300
Guest Capa...
HTML
<section class="stats-section">
 <div class="container">
  <div class="stats-grid">
   <div class="stat-item">
    <div class="stat-number">
     400
    </div>
    <div class="stat-label">
     Scenic Acres
    </div>
   </div>
   <div class="stat-item">
    <div class="stat-number">
     100+
    </div>
    <div class="stat-label">
     Years of History
    </div>
   </div>
   <div class="stat-item">
    <div class="stat-number">
     300
    </div>
    <div class="stat-label">
     Guest Capacity
    </div>
   </div>
   <div class="stat-item">
    <div class="stat-number">
     5★
    </div>
    <div class="stat-label">
     Average Rating
    </div>
   </div>
  </div>
 </div>
</section>
CSS
.stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            text-align: center;
        }
.stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.stat-number {
            font-size: 64px;
            font-weight: bold;
            color: var(--accent-gold);
            margin-bottom: 10px;
            font-family: 'Playfair Display', Georgia, serif;
        }
.stat-label {
            font-size: 18px;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.9;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.stats-section {
            padding: 80px 0;
            background: linear-gradient(90deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
        }
.stat-item {
            color: white;
        }

Sections - Faq Section

SECTIONS html> comp-430

A sections component. Contains 29 child elements.

Questions?

Everything You Need to Know

Can we bring our own vendors?

+

Absolutely! We believe in giving you complete creative free...

HTML
<section class="faq-section">
 <div class="container">
  <div class="faq-header">
   <p class="script-font">
    Questions?
   </p>
   <h2>
    Everything You Need to Know
   </h2>
  </div>
  <div class="faq-container">
   <div class="faq-item">
    <div class="faq-question">
     <h3>
      Can we bring our own vendors?
     </h3>
     <span class="faq-toggle">
      +
     </span>
    </div>
    <div class="faq-answer">
     <p>
      Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.
     </p>
    </div>
   </div>
   <div class="faq-item">
    <div class="faq-question">
     <h3>
      What's included with the venue rental?
     </h3>
     <span class="faq-toggle">
      +
     </span>
    </div>
    <div class="faq-answer">
     <p>
      Your rental includes exclusive use of our historic barn, ceremony sites, bridal suite, groom's quarters, tables, chairs, and access to our 400-acre property for photos. We also provide setup and breakdown assistance.
     </p>
    </div>
   </div>
   <div class="faq-item">
    <div class="faq-question">
     <h3>
      Do you have indoor and outdoor options?
     </h3>
     <span class="faq-toggle">
      +
     </span>
    </div>
    <div class="faq-answer">
     <p>
      Yes! Our property offers multiple ceremony sites including the vineyard overlook, oak grove, and brookside garden. Our barn provides a beautiful indoor space that can be decorated to match any theme or season.
     </p>
    </div>
   </div>
   <div class="faq-item">
    <div class="faq-question">
     <h3>
      How far in advance should we book?
     </h3>
     <span class="faq-toggle">
      +
     </span>
    </div>
    <div class="faq-answer">
     <p>
      We recommend booking 12-18 months in advance, especially for peak season dates (May through October). However, we sometimes have last-minute availability, so don't hesitate to call us at 612-801-0546.
     </p>
    </div>
   </div>
  </div>
 </div>
</section>
CSS
.faq-section {
            padding: 100px 0;
            background: white;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-container {
            max-width: 900px;
            margin: 0 auto;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-header {
            text-align: center;
            margin-bottom: 80px;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.faq-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.faq-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

Sections - Split Content

SECTIONS html> comp-449

A sections component. Contains 10 child elements.

Your Dream Venue Awaits

A Picturesque Setting for Your Perfect Day

When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.

Unlike traditional venues, we believe in saying "yes" to your vision. Your celebration, your way—with our full ...

HTML
<div class="split-content">
 <p class="script-font">
  Your Dream Venue Awaits
 </p>
 <h2>
  A Picturesque Setting for Your Perfect Day
 </h2>
 <p>
  When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.
 </p>
 <p>
  Unlike traditional venues, we believe in saying "yes" to your vision. Your celebration, your way—with our full support to bring every detail to life.
 </p>
 <div class="location-tags">
  <span class="location-tag">
   NEAR MILACA
  </span>
  <span class="location-tag">
   SAINT PAUL
  </span>
  <span class="location-tag">
   ST. CLOUD
  </span>
  <span class="location-tag">
   BRAINERD
  </span>
 </div>
 <p style="color: var(--primary-brown); font-weight: bold;">
  📞 Reserve Your Date: 612-801-0546
 </p>
</div>
CSS
.split-content p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 20px;
        }
.split-content::after {
            content: '';
            position: absolute;
            right: -100px;
            top: 0;
            bottom: 0;
            width: 200px;
            background: var(--warm-cream);
            transform: skewX(-5deg);
        }
.location-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.split-content h2 {
            font-size: 52px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }
.split-content h2 {
                font-size: 36px;
            }
.split-content .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.split-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 80px;
            background: linear-gradient(135deg, var(--warm-cream) 0%, white 100%);
            position: relative;
        }
.location-tag:hover {
            background: var(--accent-gold);
            color: white;
            transform: translateY(-2px);
        }
.split-content::after {
                display: none;
            }
.split-content {
                padding: 60px 40px;
            }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.location-tag {
            background: rgba(212, 165, 116, 0.1);
            color: var(--primary-brown);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            transition: all 0.3s ease;
        }

Sections - Cta Content

SECTIONS html> comp-450

A sections component containing buttons, links. Contains 6 child elements.

Ready to Start Planning?

Your Perfect Day Awaits

Don't wait to secure your date at Minnesota's premier barn wedding venue. Our calendar fills quickly, and we'd love to show you around our beautiful 400-acre property.

...
HTML
<div class="cta-content">
 <p class="script-font">
  Ready to Start Planning?
 </p>
 <h2>
  Your Perfect Day Awaits
 </h2>
 <p>
  Don't wait to secure your date at Minnesota's premier barn wedding venue. Our calendar fills quickly, and we'd love to show you around our beautiful 400-acre property.
 </p>
 <div class="cta-buttons">
  <a class="btn-primary" href="tel:612-801-0546">
   Call 612-801-0546
  </a>
  <a class="btn-secondary" href="#tour">
   Schedule a Tour
  </a>
 </div>
</div>
CSS
.cta-content p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.9);
            max-width: 700px;
            margin: 0 auto 40px;
            line-height: 1.8;
        }
.btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.btn-primary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
.cta-content {
            text-align: center;
            position: relative;
            z-index: 1;
        }
.cta-content h2 {
                font-size: 36px;
            }
.cta-content h2 {
            font-size: 56px;
            color: white;
            margin-bottom: 30px;
            line-height: 1.2;
        }
.btn-secondary {
                width: 100%;
                max-width: 300px;
            }
.cta-buttons {
                flex-direction: column;
                align-items: center;
            }
.btn-secondary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.btn-primary {
            background: var(--accent-gold);
            color: white;
            box-shadow: 0 6px 25px rgba(212, 165, 116, 0.4);
        }
.btn-primary,
        .btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
.btn-primary,
            .btn-secondary {
                width: 100%;
                max-width: 300px;
            }
.cta-content .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }

Modals - Split Image Overlay

MODALS html> comp-451

A modals component. Contains 2 child elements.

Book Early

Our calendar fills quickly—secure your perfect date today!

...
HTML
<div class="split-image-overlay">
 <h4>
  Book Early
 </h4>
 <p>
  Our calendar fills quickly—secure your perfect date today!
 </p>
</div>
CSS
.split-image-overlay p {
            color: var(--text-light);
            font-size: 14px;
        }
.split-image-overlay h4 {
            color: var(--deep-brown);
            font-size: 24px;
            margin-bottom: 10px;
        }
.split-image-overlay {
            position: absolute;
            bottom: 40px;
            left: 40px;
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }

Cta Buttons

BUTTONS html> comp-458

A buttons component containing buttons, links. Contains 2 child elements.

HTML
<div class="cta-buttons">
 <a class="btn-primary" href="tel:612-801-0546">
  Call 612-801-0546
 </a>
 <a class="btn-secondary" href="#tour">
  Schedule a Tour
 </a>
</div>
CSS
.btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.btn-primary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
        }
.btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
.btn-secondary {
                width: 100%;
                max-width: 300px;
            }
.cta-buttons {
                flex-direction: column;
                align-items: center;
            }
.btn-secondary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
        }
.btn-primary {
            background: var(--accent-gold);
            color: white;
            box-shadow: 0 6px 25px rgba(212, 165, 116, 0.4);
        }
.btn-primary,
        .btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
.btn-primary,
            .btn-secondary {
                width: 100%;
                max-width: 300px;
            }

Maps - Location Tags

MAPS html> comp-462

A maps component. Contains 4 child elements.

NEAR MILACA SAINT PAUL ST. CLOUD BRAINERD
...
HTML
<div class="location-tags">
 <span class="location-tag">
  NEAR MILACA
 </span>
 <span class="location-tag">
  SAINT PAUL
 </span>
 <span class="location-tag">
  ST. CLOUD
 </span>
 <span class="location-tag">
  BRAINERD
 </span>
</div>
CSS
.location-tag {
            background: rgba(212, 165, 116, 0.1);
            color: var(--primary-brown);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            transition: all 0.3s ease;
        }
.location-tag:hover {
            background: var(--accent-gold);
            color: white;
            transform: translateY(-2px);
        }
.location-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
        }

Stats - Stat Item

STATS html> comp-465

A stats component. Contains 2 child elements.

100+
Years of History
...
HTML
<div class="stat-item">
 <div class="stat-number">
  100+
 </div>
 <div class="stat-label">
  Years of History
 </div>
</div>
CSS
.stat-number {
            font-size: 64px;
            font-weight: bold;
            color: var(--accent-gold);
            margin-bottom: 10px;
            font-family: 'Playfair Display', Georgia, serif;
        }
.stat-label {
            font-size: 18px;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.9;
        }
.stat-item {
            color: white;
        }

Faqs - Faq Container

FAQS html> comp-468

A faqs component. Contains 24 child elements.

Can we bring our own vendors?

+

Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.

HTML
<div class="faq-container">
 <div class="faq-item">
  <div class="faq-question">
   <h3>
    Can we bring our own vendors?
   </h3>
   <span class="faq-toggle">
    +
   </span>
  </div>
  <div class="faq-answer">
   <p>
    Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.
   </p>
  </div>
 </div>
 <div class="faq-item">
  <div class="faq-question">
   <h3>
    What's included with the venue rental?
   </h3>
   <span class="faq-toggle">
    +
   </span>
  </div>
  <div class="faq-answer">
   <p>
    Your rental includes exclusive use of our historic barn, ceremony sites, bridal suite, groom's quarters, tables, chairs, and access to our 400-acre property for photos. We also provide setup and breakdown assistance.
   </p>
  </div>
 </div>
 <div class="faq-item">
  <div class="faq-question">
   <h3>
    Do you have indoor and outdoor options?
   </h3>
   <span class="faq-toggle">
    +
   </span>
  </div>
  <div class="faq-answer">
   <p>
    Yes! Our property offers multiple ceremony sites including the vineyard overlook, oak grove, and brookside garden. Our barn provides a beautiful indoor space that can be decorated to match any theme or season.
   </p>
  </div>
 </div>
 <div class="faq-item">
  <div class="faq-question">
   <h3>
    How far in advance should we book?
   </h3>
   <span class="faq-toggle">
    +
   </span>
  </div>
  <div class="faq-answer">
   <p>
    We recommend booking 12-18 months in advance, especially for peak season dates (May through October). However, we sometimes have last-minute availability, so don't hesitate to call us at 612-801-0546.
   </p>
  </div>
 </div>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-container {
            max-width: 900px;
            margin: 0 auto;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Item

FAQS html> comp-469

A faqs component. Contains 5 child elements.

Can we bring our own vendors?

+

Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.

...
HTML
<div class="faq-item">
 <div class="faq-question">
  <h3>
   Can we bring our own vendors?
  </h3>
  <span class="faq-toggle">
   +
  </span>
 </div>
 <div class="faq-answer">
  <p>
   Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.
  </p>
 </div>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Question

FAQS html> comp-470

A faqs component. Contains 2 child elements.

Can we bring our own vendors?

+
...
HTML
<div class="faq-question">
 <h3>
  Can we bring our own vendors?
 </h3>
 <span class="faq-toggle">
  +
 </span>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

Faqs - Faq Item

FAQS html> comp-471

A faqs component. Contains 5 child elements.

What's included with the venue rental?

+

Your rental includes exclusive use of our historic barn, ceremony sites, bridal suite, groom's quarters, tables, chairs, and access to our 400-acre property for photos. We also provide setup and breakdown assistance.

...
HTML
<div class="faq-item">
 <div class="faq-question">
  <h3>
   What's included with the venue rental?
  </h3>
  <span class="faq-toggle">
   +
  </span>
 </div>
 <div class="faq-answer">
  <p>
   Your rental includes exclusive use of our historic barn, ceremony sites, bridal suite, groom's quarters, tables, chairs, and access to our 400-acre property for photos. We also provide setup and breakdown assistance.
  </p>
 </div>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Question

FAQS html> comp-472

A faqs component. Contains 2 child elements.

What's included with the venue rental?

+
...
HTML
<div class="faq-question">
 <h3>
  What's included with the venue rental?
 </h3>
 <span class="faq-toggle">
  +
 </span>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

Faqs - Faq Item

FAQS html> comp-473

A faqs component. Contains 5 child elements.

Do you have indoor and outdoor options?

+

Yes! Our property offers multiple ceremony sites including the vineyard overlook, oak grove, and brookside garden. Our barn provides a beautiful indoor space that can be decorated to match any theme or season.

...
HTML
<div class="faq-item">
 <div class="faq-question">
  <h3>
   Do you have indoor and outdoor options?
  </h3>
  <span class="faq-toggle">
   +
  </span>
 </div>
 <div class="faq-answer">
  <p>
   Yes! Our property offers multiple ceremony sites including the vineyard overlook, oak grove, and brookside garden. Our barn provides a beautiful indoor space that can be decorated to match any theme or season.
  </p>
 </div>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Question

FAQS html> comp-474

A faqs component. Contains 2 child elements.

Do you have indoor and outdoor options?

+
...
HTML
<div class="faq-question">
 <h3>
  Do you have indoor and outdoor options?
 </h3>
 <span class="faq-toggle">
  +
 </span>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

Faqs - Faq Item

FAQS html> comp-475

A faqs component. Contains 5 child elements.

How far in advance should we book?

+

We recommend booking 12-18 months in advance, especially for peak season dates (May through October). However, we sometimes have last-minute availability, so don't hesitate to call us at 612-801-0546.

...
HTML
<div class="faq-item">
 <div class="faq-question">
  <h3>
   How far in advance should we book?
  </h3>
  <span class="faq-toggle">
   +
  </span>
 </div>
 <div class="faq-answer">
  <p>
   We recommend booking 12-18 months in advance, especially for peak season dates (May through October). However, we sometimes have last-minute availability, so don't hesitate to call us at 612-801-0546.
  </p>
 </div>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Question

FAQS html> comp-476

A faqs component. Contains 2 child elements.

How far in advance should we book?

+
...
HTML
<div class="faq-question">
 <h3>
  How far in advance should we book?
 </h3>
 <span class="faq-toggle">
  +
 </span>
</div>
CSS
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

Headers - Headercomponent

HEADERS html> comp-481

A headers component containing links. Contains 19 child elements.

R

Headers - Header Content

HEADERS html> comp-482

A headers component containing links. Contains 18 child elements.

R
CSS
.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-menu a:hover::after,
.header-component .nav-menu a.active::after {
    width: 100%;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}
.menu-toggle {
        display: flex;
    }
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}
.active::after {
    width: 100%;
}
.logo-circle {
    border-color: var(--header-primary);
    color: var(--header-primary);
}
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--header-accent);
    transition: width 0.3s ease;
}
.nav-menu a {
    color: var(--header-brown);
}
.logo-circle {
    width: 55px;
    height: 55px;
    border: 2px solid var(--header-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--header-cream);
    font-weight: 300;
    transition: all 0.4s ease;
}
.nav-menu a {
    color: var(--header-cream);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.4s ease;
}
.menu-toggle span {
    background: var(--header-dark);
}
.menu-toggle span {
    width: 25px;
    height: 2px;
    background: var(--header-cream);
    transition: all 0.4s ease;
}
.nav-menu {
        display: none;
    }

Headers - Services Header

HEADERS html> comp-483

A headers component. Contains 2 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations

...
HTML
<div class="services-header">
 <h2>
  Celebrate Every Moment
 </h2>
 <p class="subtitle">
  From intimate gatherings to grand celebrations
 </p>
</div>
CSS
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.services-header .subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.services-header h2 {
    font-size: 48px;
    color: var(--services-dark);
    margin-bottom: 20px;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.subtitle {
    color: white;
}
.services-header {
    text-align: center;
    margin-bottom: 80px;
}

Headers - Package Header

HEADERS html> comp-485

A headers component. Contains 3 child elements.

Intimate

$3,500 / up to 75 guests
...
HTML
<div class="package-header">
 <h3 class="package-name">
  Intimate
 </h3>
 <div class="package-price">
  $3,500
  <span>
   / up to 75 guests
  </span>
 </div>
</div>
CSS
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}

Headers - Package Header

HEADERS html> comp-486

A headers component. Contains 3 child elements.

Classic

$5,500 / up to 150 guests
...
HTML
<div class="package-header">
 <h3 class="package-name">
  Classic
 </h3>
 <div class="package-price">
  $5,500
  <span>
   / up to 150 guests
  </span>
 </div>
</div>
CSS
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}

Headers - Package Header

HEADERS html> comp-487

A headers component. Contains 3 child elements.

Grand

$8,500 / up to 300 guests
...
HTML
<div class="package-header">
 <h3 class="package-name">
  Grand
 </h3>
 <div class="package-price">
  $8,500
  <span>
   / up to 300 guests
  </span>
 </div>
</div>
CSS
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}

Headers - Gallery Header

HEADERS html> comp-488

A headers component. Contains 3 child elements.

...
HTML
<div class="gallery-header">
 <p class="script-font">
  Real Love Stories
 </p>
 <h2>
  WEDDINGS AT THE BARN
 </h2>
 <p class="subtitle">
  Every celebration tells a unique story of love, laughter, and happily ever after
 </p>
</div>
CSS
.script-font {
    font-size: 28px;
    color: var(--pkg-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.script-font {
    font-size: 32px;
    color: var(--gallery-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.gallery-header {
    text-align: center;
    margin-bottom: 80px;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.subtitle {
    color: white;
}

Headers - Blog Header

HEADERS html> comp-489

A headers component. Contains 3 child elements.

Stories from the Barn

Wedding inspiration and real celebrations

...
HTML
<div class="blog-header">
 <div>
  <h2>
   Stories from the Barn
  </h2>
  <p class="subtitle">
   Wedding inspiration and real celebrations
  </p>
 </div>
</div>
CSS
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
}
.subtitle {
    color: white;
}

Headers - Testimonials Header

HEADERS html> comp-490

A headers component. Contains 2 child elements.

Love Stories

What Our Couples Say

...
HTML
<div class="testimonials-header">
 <p class="script-text">
  Love Stories
 </p>
 <h2>
  What Our Couples Say
 </h2>
</div>
CSS
.script-text {
    font-size: 28px;
    color: var(--test-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.testimonials-header {
    text-align: center;
    margin-bottom: 80px;
}

Headers - Nav Menu

HEADERS html> comp-493

A headers component containing links. Contains 10 child elements.

HTML
<ul class="nav-menu">
 <li>
  <a class="active" href="#home">
   HOME
  </a>
 </li>
 <li>
  <a href="#about">
   ABOUT
  </a>
 </li>
 <li>
  <a href="#services">
   SERVICES
  </a>
 </li>
 <li>
  <a href="#gallery">
   GALLERY
  </a>
 </li>
 <li>
  <a href="#contact">
   CONTACT
  </a>
 </li>
</ul>
CSS
.nav-menu a:hover::after,
.header-component .nav-menu a.active::after {
    width: 100%;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}
.active::after {
    width: 100%;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--header-accent);
    transition: width 0.3s ease;
}
.nav-menu a {
    color: var(--header-brown);
}
.nav-menu a {
    color: var(--header-cream);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.4s ease;
}
.nav-menu {
        display: none;
    }

Headers - Nav

HEADERS html> comp-494

A headers component containing links. Contains 11 child elements.

HTML
<nav>
 <ul class="nav-menu">
  <li>
   <a class="active" href="#home">
    HOME
   </a>
  </li>
  <li>
   <a href="#about">
    ABOUT
   </a>
  </li>
  <li>
   <a href="#services">
    SERVICES
   </a>
  </li>
  <li>
   <a href="#gallery">
    GALLERY
   </a>
  </li>
  <li>
   <a href="#contact">
    CONTACT
   </a>
  </li>
 </ul>
</nav>
CSS
.nav-menu a:hover::after,
.header-component .nav-menu a.active::after {
    width: 100%;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}
.active::after {
    width: 100%;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--header-accent);
    transition: width 0.3s ease;
}
.nav-menu a {
    color: var(--header-brown);
}
.nav-menu a {
    color: var(--header-cream);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.4s ease;
}
.nav-menu {
        display: none;
    }

Heroes - Hero Component

HEROES html> comp-496

A heroes component containing buttons, links. Contains 11 child elements.

EST. 2005
Minnesota's Premier Venue

Rum River
Barn

Where rustic charm meets
modern elegance

CSS
.hero-component .btn {
        width: 100%;
        text-align: center;
    }
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.hero-component h1 {
        font-size: 2.5rem;
    }
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.hero-component .btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}
.hero-component .hero-year {
    font-size: 1.125rem;
    color: var(--hero-accent);
    margin-bottom: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    opacity: 0.9;
}
.hero-component {
    --hero-primary: #8B6337;
    --hero-accent: #D4A574;
    --hero-cream: #FAF6F2;
    --hero-dark: #2C2416;
    --hero-brown: #4A3426;
}
.hero-component {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(rgba(31, 29, 26, 0.85), rgba(31, 29, 26, 0.6)),
                      linear-gradient(135deg, var(--hero-brown) 0%, var(--hero-dark) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}
.hero-component .hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}
.hero-component h1 {
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--hero-cream);
    margin-bottom: 2rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.hero-component .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.hero-component .hero-subtitle {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--hero-cream);
    margin-bottom: 1.25rem;
    opacity: 0.8;
}
.hero-component .btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.btn {
        width: 100%;
        text-align: center;
    }
.hero-component .btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-component .hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.hero-component .hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.hero-component .btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--hero-cream);
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 3rem;
}
.btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}
.btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.hero-year {
    font-size: 1.125rem;
    color: var(--hero-accent);
    margin-bottom: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    opacity: 0.9;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.hero-component .lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--hero-cream);
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 3rem;
}
.btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.hero-component .btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}
.hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.hero-subtitle {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--hero-cream);
    margin-bottom: 1.25rem;
    opacity: 0.8;
}

Heroes - Hero Container

HEROES html> comp-497

A heroes component containing buttons, links. Contains 10 child elements.

EST. 2005
Minnesota's Premier Venue

Rum River
Barn

Where rustic charm meets
modern elegance

HTML
<div class="hero-container">
 <div class="hero-content">
  <div class="hero-year">
   EST. 2005
  </div>
  <div class="hero-subtitle">
   Minnesota's Premier Venue
  </div>
  <h1>
   Rum River
   <br/>
   Barn
  </h1>
  <p class="lead-text">
   Where rustic charm meets
   <br/>
   modern elegance
  </p>
  <div class="hero-buttons">
   <a class="btn btn-light" href="#about">
    Discover Our Story
   </a>
   <a class="btn btn-outline" href="#contact">
    Schedule Your Visit
   </a>
  </div>
 </div>
</div>
CSS
.btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.hero-year {
    font-size: 1.125rem;
    color: var(--hero-accent);
    margin-bottom: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    opacity: 0.9;
}
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.btn {
        width: 100%;
        text-align: center;
    }
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--hero-cream);
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 3rem;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}
.hero-subtitle {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--hero-cream);
    margin-bottom: 1.25rem;
    opacity: 0.8;
}
.btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

Heroes - Hero Content

HEROES html> comp-498

A heroes component containing buttons, links. Contains 9 child elements.

EST. 2005
Minnesota's Premier Venue

Rum River
Barn

Where rustic charm meets
modern elegance

...
HTML
<div class="hero-content">
 <div class="hero-year">
  EST. 2005
 </div>
 <div class="hero-subtitle">
  Minnesota's Premier Venue
 </div>
 <h1>
  Rum River
  <br/>
  Barn
 </h1>
 <p class="lead-text">
  Where rustic charm meets
  <br/>
  modern elegance
 </p>
 <div class="hero-buttons">
  <a class="btn btn-light" href="#about">
   Discover Our Story
  </a>
  <a class="btn btn-outline" href="#contact">
   Schedule Your Visit
  </a>
 </div>
</div>
CSS
.btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.hero-year {
    font-size: 1.125rem;
    color: var(--hero-accent);
    margin-bottom: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    opacity: 0.9;
}
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.btn {
        width: 100%;
        text-align: center;
    }
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--hero-cream);
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 3rem;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.hero-subtitle {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--hero-cream);
    margin-bottom: 1.25rem;
    opacity: 0.8;
}
.btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

Heroes - Hero Buttons

HEROES html> comp-499

A heroes component containing buttons, links. Contains 2 child elements.

HTML
<div class="hero-buttons">
 <a class="btn btn-light" href="#about">
  Discover Our Story
 </a>
 <a class="btn btn-outline" href="#contact">
  Schedule Your Visit
 </a>
</div>
CSS
.btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.btn {
        width: 100%;
        text-align: center;
    }
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

Galleries - Gallery Component

GALLERIES html> comp-500

A galleries component containing images. Contains 36 child elements.